/* =============================================================
   home.css — styles specific to the Home / promo landing page
   ============================================================= */

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(31,157,99,.28), transparent 60%),
    radial-gradient(900px 480px at -5% 110%, rgba(9,78,51,.22), transparent 55%),
    linear-gradient(160deg, #052a1c 0%, #094e33 45%, #0c6441 100%);
  color: #fff;
}
.hero::after {
  /* subtle dot texture */
  content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.hero > * { position: relative; z-index: 1; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#eafff0; padding:.4rem .9rem; border-radius:9999px;
  font-weight:600; font-size:.82rem; letter-spacing:.02em; backdrop-filter: blur(4px);
}

.hero-title {
  font-weight: 800; line-height: .95; letter-spacing: -.02em;
  font-size: clamp(2.75rem, 8vw, 5.5rem);
}
.hero-title .yr {
  background: linear-gradient(90deg, #9be7ab, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Countdown ---- */
.countdown { display:flex; gap:.6rem; flex-wrap:wrap; }
.count-box {
  flex:1 1 0; min-width: 70px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius: 16px; padding: .9rem .5rem; text-align:center; backdrop-filter: blur(4px);
}
.count-num {
  display:block; font-family:'Poppins',sans-serif; font-weight:800;
  font-size: clamp(1.9rem, 6vw, 3rem); line-height:1; font-variant-numeric: tabular-nums;
}
.count-lbl { display:block; margin-top:.35rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.8); }

/* ---- Tickets urgency ---- */
.ticket-dot {
  width:.6rem; height:.6rem; border-radius:9999px; background:#ff914d;
  box-shadow:0 0 0 0 rgba(255,145,77,.7); animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,145,77,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,145,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,145,77,0); }
}
.ticket-bar-track { height:.6rem; background: var(--grey-200); border-radius:9999px; overflow:hidden; }
.ticket-bar-fill  { height:100%; background: linear-gradient(90deg, var(--entre-green), var(--entre-green-light)); border-radius:9999px; }

/* ---- Feature icon chip ---- */
.feature-ico {
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: var(--entre-green-50); color: var(--entre-green-dark);
}

/* ---- Stat number ---- */
.stat-num { font-family:'Poppins',sans-serif; font-weight:800; font-size: clamp(2.2rem,5vw,3.2rem); color: var(--entre-green-dark); line-height:1; }

/* ---- Road-to band ---- */
.road-band { background: linear-gradient(120deg, #eaf6ec, #f8faf9); }

/* Animated hero background (drifting orbs) */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter: blur(50px); opacity:.5; will-change: transform; }
.orb-1 { width:440px; height:440px; left:-70px; top:-90px;  background: radial-gradient(circle at 35% 35%, #24b876, transparent 70%); animation: drift1 22s ease-in-out infinite; }
.orb-2 { width:380px; height:380px; right:-50px; top:18%;   background: radial-gradient(circle at 50% 50%, #12a3b8, transparent 70%); animation: drift2 27s ease-in-out infinite; }
.orb-3 { width:320px; height:320px; left:28%;  bottom:-110px; background: radial-gradient(circle at 50% 50%, #1f9d63, transparent 70%); animation: drift3 31s ease-in-out infinite; }
.orb-4 { width:230px; height:230px; right:24%; top:-50px;  background: radial-gradient(circle at 50% 50%, #6fe3a6, transparent 70%); animation: drift1 18s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(46px,32px) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-54px,42px) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(34px,-44px) scale(1.15)} }
.hero-bg { z-index:0; }
@media (prefers-reduced-motion: reduce){ .orb { animation:none !important; } }

/* Hero entrance animation */
@keyframes heroUp { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
.hero-anim > * { opacity:0; animation: heroUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-anim > *:nth-child(1){ animation-delay:.05s }
.hero-anim > *:nth-child(2){ animation-delay:.13s }
.hero-anim > *:nth-child(3){ animation-delay:.21s }
.hero-anim > *:nth-child(4){ animation-delay:.29s }
.hero-anim > *:nth-child(5){ animation-delay:.37s }
.hero-anim > *:nth-child(6){ animation-delay:.45s }
.hero-anim > *:nth-child(7){ animation-delay:.53s }
.hero-anim > *:nth-child(8){ animation-delay:.61s }
.hero-countdown-card { opacity:0; animation: heroUp .8s cubic-bezier(.2,.7,.2,1) .5s forwards; }

/* Animated shimmer across the EntreCon title */
.hero-title .yr { background-size: 220% auto; animation: yrShimmer 7s linear infinite; }
@keyframes yrShimmer { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce){
  .hero-anim > *, .hero-countdown-card { opacity:1 !important; animation:none !important; }
  .hero-title .yr { animation:none; }
}


/* Road to EntreCon — angled photo pillars (leaning ~70deg, spaced) */
.road-pillars { display:flex; justify-content:center; align-items:center; gap:18px; padding:14px 6px; }
.road-pillars .pillar {
  position:relative; flex:0 0 auto; width:92px; overflow:hidden; border-radius:20px;
  transform: skewX(-12deg); box-shadow:0 22px 44px -20px rgba(15,32,50,.4);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease;
}
.road-pillars .pillar::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(12,58,32,.30)); }
.road-pillars .pillar img { position:absolute; inset:-14%; width:128%; height:128%; object-fit:cover; transform: skewX(12deg) scale(1.2); }
.road-pillars .pillar:hover { transform: skewX(-12deg) translateY(-12px); box-shadow:0 30px 58px -18px rgba(15,32,50,.5); }
.road-pillars .p1 { height:246px; }
.road-pillars .p2 { height:308px; }
.road-pillars .p3 { height:278px; }
.road-pillars .p4 { height:330px; }
@media (max-width:640px){ .road-pillars { gap:12px; padding:10px 0; } .road-pillars .pillar { width:72px; border-radius:16px; } 
  .road-pillars .p1{height:210px} .road-pillars .p2{height:260px} .road-pillars .p3{height:238px} .road-pillars .p4{height:280px} }
@media (prefers-reduced-motion: reduce){ .road-pillars .pillar { transition:none; } }

/* ===== Early-bird pricing card ===== */
.eb-badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:linear-gradient(135deg,#f6d27a,#e8b74d); color:#3a2708; font-weight:800;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px 6px 10px; border-radius:9999px;
  box-shadow:0 8px 22px -8px rgba(232,183,77,.65); animation:ebPulse 2.6s ease-in-out infinite; }
.eb-badge svg { color:#8a5a06; }
@keyframes ebPulse { 0%,100%{ box-shadow:0 8px 22px -8px rgba(232,183,77,.55); } 50%{ box-shadow:0 12px 30px -6px rgba(232,183,77,.95); } }
.eb-was { color:rgba(255,255,255,.55); font-weight:700; font-size:1.35rem; text-decoration:line-through;
  text-decoration-thickness:2px; padding-bottom:4px; }
.eb-save { align-self:center; margin-bottom:8px; background:rgba(246,210,122,.16); color:#f6d27a;
  border:1px solid rgba(246,210,122,.5); font-weight:800; font-size:.72rem; letter-spacing:.03em;
  padding:4px 10px; border-radius:9999px; }
.eb-deadline { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px;
  font-size:.82rem; color:rgba(255,255,255,.82); }
.eb-deadline b { color:#f6d27a; font-weight:800; }
.eb-cd { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  padding:3px 9px; border-radius:9999px; font-weight:700; font-size:.72rem; white-space:nowrap; }
.eb-cd.urgent { background:rgba(246,210,122,.18); border-color:rgba(246,210,122,.5); color:#f6d27a; }
/* Ended state */
[data-ticket].eb-ended .eb-badge,
[data-ticket].eb-ended .eb-was,
[data-ticket].eb-ended .eb-save,
[data-ticket].eb-ended .eb-cd { display:none; }
@media (prefers-reduced-motion: reduce){ .eb-badge { animation:none; } }