:root{
  --bg:#020202;
  --paper:#f0ebe6;
  --muted:#8a827e;
  --red:#b52222;
  --red-bright:#f0443c;
  --green:#2de084;
  --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden;overflow-y:auto}
button,a{font:inherit}

.experience{position:relative;min-height:100vh;overflow-x:hidden;overflow-y:visible;background:#020202}
.ambient{position:absolute;inset:0;overflow:hidden}
.ambient__red{position:absolute;inset:-20%;background:
  radial-gradient(circle at 72% 26%,rgba(181,34,30,.20),transparent 19%),
  radial-gradient(circle at 20% 68%,rgba(120,18,16,.12),transparent 26%),
  linear-gradient(180deg,#070505 0%,#030303 58%,#020202 100%);
  animation:redBreath 11s ease-in-out infinite alternate}
@keyframes redBreath{to{transform:scale(1.025);filter:brightness(1.08)}}

.ambient__grid{position:absolute;inset:0;opacity:.16;background:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 58%,transparent 92%)}
.ambient__fog{position:absolute;border-radius:50%;filter:blur(85px);opacity:.14;background:#927a72}
.ambient__fog--1{width:62vw;height:27vh;left:-20vw;bottom:9vh;animation:fog1 18s ease-in-out infinite alternate}
.ambient__fog--2{width:52vw;height:24vh;right:-18vw;top:20vh;animation:fog2 23s ease-in-out infinite alternate}
@keyframes fog1{to{transform:translateX(34vw) scale(1.2)}}
@keyframes fog2{to{transform:translateX(-30vw) scale(1.18)}}
.ambient__embers{position:absolute;inset:0;pointer-events:none}
.ember{position:absolute;width:2px;height:2px;border-radius:50%;background:#d05b2e;box-shadow:0 0 9px #ff6935;animation:emberRise linear infinite}
@keyframes emberRise{0%{transform:translateY(110vh);opacity:0}12%{opacity:.8}80%{opacity:.24}100%{transform:translateY(-10vh) translateX(45px);opacity:0}}
.ambient__grain{position:absolute;inset:-12%;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .3s steps(2) infinite}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,1%)}}
.ambient__vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.38) 63%,rgba(0,0,0,.95) 100%)}

.skip{position:absolute;z-index:100;right:28px;top:24px;padding:11px 15px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.38);color:#837b76;font-size:9px;letter-spacing:.22em;font-weight:900;cursor:pointer;transition:.2s}
.skip:hover{color:#fff;border-color:rgba(181,34,34,.7)}

.cinematic{position:absolute;z-index:50;inset:0;background:rgba(0,0,0,.26);transition:opacity 1.15s ease,visibility 1.15s}
.cinematic.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.bars:before,.bars:after{content:"";position:absolute;z-index:9;left:0;right:0;height:10.5vh;background:#000}
.bars:before{top:0}.bars:after{bottom:0}

.scene{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:12vh 7vw;opacity:0;text-transform:uppercase}
.micro{margin:0 0 16px;color:#b72d2b;font-size:10px;letter-spacing:.42em;font-weight:900}
.scene h2{margin:0;font-size:clamp(72px,10vw,155px);line-height:.80;letter-spacing:-.065em}
.scene h2 span{color:transparent;-webkit-text-stroke:2px rgba(240,235,230,.88)}

.scene--01{animation:scene1 3.3s ease .5s both}
.scene--02{animation:scene2 3.4s ease 3.6s both}
.scene--03{animation:scene3 4.9s ease 6.8s both}
.scene--04{animation:scene4 3.0s ease 11.3s both}
.scene--05{animation:scene5 4.1s ease 14.1s both}

@keyframes scene1{0%{opacity:0;transform:scale(1.035)}23%,72%{opacity:1;transform:none}100%{opacity:0;transform:scale(.99)}}
@keyframes scene2{0%{opacity:0;transform:translateY(16px)}22%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes scene3{0%{opacity:0;filter:blur(8px)}18%,76%{opacity:1;filter:none}100%{opacity:0;filter:blur(3px);transform:scale(.99)}}
@keyframes scene4{0%{opacity:0}22%,70%{opacity:1}100%{opacity:0}}
@keyframes scene5{0%{opacity:0;transform:scale(1.035)}20%,78%{opacity:1;transform:none}100%{opacity:0;transform:scale(.985)}}

.brand-reveal{text-align:center}
.brand-reveal__line{width:min(720px,70vw);height:1px;margin:0 auto 27px;background:linear-gradient(90deg,transparent,#a92222 18%,#f13c37 50%,#a92222 82%,transparent);box-shadow:0 0 20px rgba(225,54,49,.28);animation:linePulse 2s ease-in-out infinite alternate}
@keyframes linePulse{to{filter:brightness(1.45)}}
.brand-reveal__title{margin:0;font-size:clamp(94px,15vw,230px);line-height:.76;letter-spacing:-.075em;font-weight:950}
.brand-reveal p{margin:30px 0 0;color:#8e8681;font-size:clamp(9px,1vw,14px);letter-spacing:.45em}

.features{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;color:#cfc7c2;font-size:clamp(10px,1vw,15px);letter-spacing:.28em;font-weight:800}
.features i{width:4px;height:4px;border-radius:50%;background:#b62c2b;box-shadow:0 0 9px rgba(182,44,43,.6)}

.cinematic__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cinematic__flash.flash{animation:flash .55s ease}
@keyframes flash{0%{opacity:0}20%{opacity:.82}100%{opacity:0}}

.countdown-screen{position:relative;z-index:20;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:30px 5vw 27px;opacity:0;transform:scale(1.018);transition:opacity 1.2s ease,transform 1.2s ease;overflow:visible}
.countdown-screen.is-visible{opacity:1;transform:none}
.header,.footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.header__brand strong{display:block;font-size:23px;letter-spacing:.12em}
.header__brand span{display:block;margin-top:4px;color:#6e6662;font-size:9px;letter-spacing:.29em}
.header__status{display:flex;align-items:center;gap:9px;color:#766e69;font-size:9px;letter-spacing:.2em;font-weight:900}
.header__status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(45,224,132,.52)}

.countdown-screen__inner{position:relative;z-index:2;align-self:center;width:100%;max-width:1180px;margin:3vh auto}
.eyebrow{margin:0 0 14px;color:#df312e;font-size:10px;letter-spacing:.34em;font-weight:900}
.countdown-screen h2{margin:0;font-size:clamp(64px,9.3vw,145px);line-height:.80;letter-spacing:-.062em}
.countdown-screen h2 span{color:transparent;-webkit-text-stroke:2px rgba(240,235,230,.86)}
.lead{margin:30px 0 33px;color:#9d948f;font-size:clamp(15px,1.45vw,21px);line-height:1.55}
.lead strong{color:#fff}

.countdown{display:flex;align-items:stretch;gap:11px}
.unit{position:relative;flex:1;min-width:140px;padding:21px 20px 18px;border:1px solid rgba(183,39,35,.28);background:linear-gradient(180deg,rgba(25,14,14,.84),rgba(8,7,7,.9));box-shadow:inset 0 0 45px rgba(170,22,22,.035),0 18px 50px rgba(0,0,0,.2);overflow:hidden}
.unit:after{content:"";position:absolute;left:0;bottom:0;width:34%;height:1px;background:#b52b28;box-shadow:0 0 12px rgba(181,43,40,.75)}
.unit--seconds{border-color:rgba(235,57,51,.48);box-shadow:inset 0 0 45px rgba(170,22,22,.06),0 0 30px rgba(181,31,28,.08)}
.unit strong{display:block;font-size:clamp(54px,6.8vw,104px);line-height:.9;letter-spacing:-.07em}
.unit span{display:block;margin-top:13px;color:#706864;font-size:9px;letter-spacing:.25em;font-weight:900}
.countdown>b{display:grid;place-items:center;color:#902323;font-size:39px}
.unit.tick strong{animation:numberTick .28s ease}
@keyframes numberTick{0%{opacity:.34;transform:translateY(-5px)}100%{opacity:1;transform:none}}

.countdown-info{display:flex;justify-content:space-between;gap:20px;margin-top:17px;color:#6a625e;font-size:9px;letter-spacing:.19em;font-weight:900}
.countdown-info span:first-child{display:flex;align-items:center;gap:9px}
.countdown-info i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(45,224,132,.5);animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(45,224,132,0)}100%{box-shadow:0 0 0 0 rgba(45,224,132,0)}}

.progress{max-width:600px;margin-top:27px}
.progress__top{display:flex;justify-content:space-between;margin-bottom:10px;color:#706864;font-size:9px;letter-spacing:.18em;font-weight:900}
.progress__top strong{color:#cd302c}
.progress__track{height:3px;background:#1c1918;overflow:hidden}
.progress__track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#7d1818,#ef3d37);box-shadow:0 0 16px rgba(239,61,55,.42);transition:width .8s linear}

.opened{margin-top:28px;padding:25px 27px;border:1px solid rgba(211,47,42,.7);background:linear-gradient(90deg,rgba(120,18,18,.2),rgba(7,6,6,.78));animation:open .7s ease both}
.opened p{margin:0 0 8px;color:#36e28a;font-size:9px;letter-spacing:.25em;font-weight:900}
.opened p i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36e28a;margin-right:8px}
.opened h3{margin:0 0 7px;font-size:clamp(30px,4vw,56px);letter-spacing:-.045em}
.opened>span{display:block;color:#9a918c;margin-bottom:19px}
.opened a{display:inline-flex;align-items:center;gap:28px;padding:15px 21px;color:#fff;text-decoration:none;background:#aa1f1f;border:1px solid #df3b35;font-size:10px;font-weight:900;letter-spacing:.15em}
@keyframes open{from{opacity:0;transform:translateY(12px)}}

.footer{border-top:1px solid rgba(255,255,255,.07);padding-top:18px;color:#58514d;font-size:8px;letter-spacing:.18em;font-weight:900}

@media(max-width:780px){
  body{overflow:auto}.skip{right:15px;top:15px}.bars:before,.bars:after{height:7vh}
  .countdown-screen{padding:22px 17px}.countdown-screen__inner{margin-top:7vh}
  .countdown{display:grid;grid-template-columns:1fr 1fr;gap:8px}.countdown>b{display:none}.unit{min-width:0}
  .countdown-screen h2,.scene h2{font-size:clamp(60px,19vw,98px)}.brand-reveal__title{font-size:clamp(80px,24vw,140px)}
  .countdown-info,.footer{align-items:flex-start;flex-direction:column}.header__status{display:none}
}

/* ===== AFFLUENCE EN DIRECT ===== */
.live-presence{
  margin-top:22px;
  max-width:600px;
  display:grid;
  grid-template-columns:38px auto 1fr;
  align-items:center;
  gap:14px;
  padding:15px 17px;
  border:1px solid rgba(181,43,40,.24);
  background:linear-gradient(90deg,rgba(123,18,18,.10),rgba(7,7,7,.55));
}
.live-presence__icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(45,224,132,.22);
  background:rgba(45,224,132,.04);
}
.live-presence__icon span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2de084;
  box-shadow:0 0 0 0 rgba(45,224,132,.48);
  animation:presencePulse 1.7s infinite;
}
.live-presence__copy{
  display:flex;
  align-items:baseline;
  gap:9px;
  white-space:nowrap;
}
.live-presence__copy strong{
  display:inline-block;
  min-width:18px;
  font-size:25px;
  line-height:1;
  color:#f0ebe6;
  letter-spacing:-.04em;
}
.live-presence__copy span{
  color:#aaa19c;
  font-size:9px;
  letter-spacing:.19em;
  font-weight:900;
}
.live-presence small{
  justify-self:end;
  color:#665f5b;
  font-size:8px;
  letter-spacing:.17em;
  font-weight:900;
  white-space:nowrap;
}
@keyframes presencePulse{
  70%{box-shadow:0 0 0 8px rgba(45,224,132,0)}
  100%{box-shadow:0 0 0 0 rgba(45,224,132,0)}
}
@media(max-width:780px){
  .live-presence{
    grid-template-columns:38px 1fr;
  }
  .live-presence small{
    grid-column:1/-1;
    justify-self:start;
    white-space:normal;
  }
  .live-presence__copy{
    flex-wrap:wrap;
    white-space:normal;
  }
}