*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#210012;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.hero{position:relative;width:100%;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;background:#210012}
.scene{position:absolute;inset:0;z-index:-5;display:block}
.scene img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.veil{position:absolute;inset:0;z-index:-4;background:linear-gradient(90deg,rgba(24,0,14,.04),rgba(20,0,12,.18) 60%,rgba(15,0,9,.28))}
.panel{position:absolute;z-index:4;left:4.5vw;top:50%;transform:translateY(-50%);width:min(44vw,700px);display:flex;flex-direction:column;align-items:center;text-align:center}
.logo{display:block;width:min(43vw,650px);max-height:18vh;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.35));margin-bottom:-.8vh}
.overline{font-size:clamp(8px,.7vw,12px);letter-spacing:.34em;font-weight:800;color:#ffd7e8;margin:0 0 1vh}
.panel h1{margin:0;line-height:.80;letter-spacing:-.055em;font-size:clamp(42px,5vw,78px);font-weight:950;text-shadow:0 0 24px rgba(255,42,145,.35)}
.panel h1 span,.panel h1 strong{display:block}.panel h1 span{color:#fff}.panel h1 strong{color:#ff2b8d}
.soon{margin:1.5vh 0 2vh;color:#ffe3ef;font-size:clamp(10px,.9vw,14px);letter-spacing:.48em;font-weight:900}
.countdown{width:min(100%,590px);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.countdown>div{padding:12px 5px;border-radius:17px;background:linear-gradient(180deg,rgba(55,0,34,.58),rgba(23,0,15,.76));border:1.5px solid rgba(255,73,161,.95);box-shadow:inset 0 0 22px rgba(255,28,143,.10),0 0 15px rgba(255,22,134,.15);backdrop-filter:blur(6px)}
.countdown b{display:block;font-family:Georgia,serif;font-size:clamp(25px,2.6vw,42px);line-height:1;font-variant-numeric:tabular-nums}
.countdown small{display:block;margin-top:6px;font-size:clamp(7px,.62vw,10px);font-weight:900;letter-spacing:.1em}
.date{margin-top:1.5vh;padding:8px 32px;border:1.5px solid #ffb345;border-radius:999px;color:#ffe1a0;font-family:Georgia,serif;font-size:clamp(13px,1.2vw,19px);font-weight:800;letter-spacing:.1em;background:rgba(40,0,23,.54);box-shadow:0 0 18px rgba(255,104,35,.2)}
.float{position:absolute;z-index:3;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));animation:float 7s ease-in-out infinite}
.f1{left:3%;bottom:3%;font-size:45px}.f2{right:3%;bottom:4%;font-size:40px;animation-delay:-2s}.f3{right:28%;top:7%;font-size:32px;animation-delay:-4s}.f4{left:42%;top:10%;font-size:29px;animation-delay:-5s}
.spark{position:absolute;z-index:2;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px #ff3b9d;animation:rise linear infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(6deg)}}@keyframes rise{0%{transform:translateY(30px);opacity:0}20%{opacity:.8}100%{transform:translateY(-80px);opacity:0}}

@media (orientation:portrait){
  .scene img{object-fit:cover;object-position:center top}
  .veil{background:linear-gradient(0deg,rgba(18,0,11,.35) 0%,rgba(20,0,13,.08) 45%,rgba(15,0,10,.02) 100%)}
  .panel{left:50%;top:auto;bottom:max(2.2vh,env(safe-area-inset-bottom));transform:translateX(-50%);width:94%}
  .logo{width:min(88vw,590px);max-height:12vh;margin-bottom:-.6vh}
  .overline{font-size:7px;margin-bottom:.7vh}
  .panel h1{font-size:clamp(37px,10.8vw,66px)}
  .soon{font-size:clamp(9px,2.7vw,13px);margin:1.05vh 0 1.45vh}
  .countdown{width:100%;gap:6px}
  .countdown>div{padding:9px 2px;border-radius:13px}
  .countdown b{font-size:clamp(22px,7vw,35px)}
  .countdown small{font-size:7px;margin-top:4px}
  .date{margin-top:1.05vh;padding:6px 25px;font-size:clamp(13px,4vw,18px)}
  .f3,.f4{display:none}.f1,.f2{font-size:27px;opacity:.78}
}
@media (orientation:portrait) and (max-height:740px){
  .logo{max-height:11vh}.panel h1{font-size:clamp(34px,9.5vw,54px)}
  .soon{margin:.7vh 0 1vh}.countdown>div{padding:7px 2px}.date{margin-top:.7vh}
}
@media (orientation:landscape) and (max-height:650px){
  .logo{max-height:18vh}.soon{margin:1vh 0}.countdown>div{padding:8px}.date{margin-top:1vh}
}
@media(prefers-reduced-motion:reduce){.float,.spark{animation:none!important}}

@media (orientation:landscape) and (min-width:900px){
  .scene img{object-position:center center}
  .veil{
    background:
      radial-gradient(circle at 24% 50%,rgba(255,42,145,.10),transparent 38%),
      linear-gradient(90deg,rgba(20,0,12,.28) 0%,rgba(20,0,12,.10) 44%,rgba(12,0,8,.03) 70%)
  }
  .panel{left:3.8vw;width:min(45vw,720px)}
  .logo{width:min(39vw,620px);max-height:17vh;margin-bottom:-.4vh}
  .overline{font-size:clamp(8px,.72vw,12px);margin-bottom:1.1vh}
  .panel h1{font-size:clamp(48px,5.15vw,86px)}
  .soon{margin:1.4vh 0 2vh}
  .countdown{width:min(100%,610px)}
}
@media (orientation:landscape) and (min-width:1400px){
  .panel{left:4.2vw;width:min(43vw,735px)}
  .logo{width:min(37vw,640px)}
}

@media (orientation:landscape) and (min-width:900px){
  .panel{
    left:62%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(47vw,760px);
  }
  .logo{width:min(35vw,600px);max-height:16vh}
  .countdown{width:min(100%,620px)}
}

@media (orientation:landscape) and (min-width:900px){
  .panel{
    isolation:isolate;
  }
  /* One soft pool of shade behind the text: a long eased falloff that reaches zero
     inside its own box, so there is no blur/mask edge anywhere. */
  .panel::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    top:50%;
    width:150%;
    height:150%;
    transform:translate(-50%,-50%);
    background:radial-gradient(closest-side,
      rgba(22,0,16,.74) 0%,
      rgba(34,0,23,.66) 22%,
      rgba(48,0,31,.50) 40%,
      rgba(58,0,38,.32) 58%,
      rgba(58,0,38,.15) 74%,
      rgba(58,0,38,.05) 88%,
      transparent 100%);
    pointer-events:none;
  }
  .logo{
    filter:
      drop-shadow(0 0 7px rgba(255,39,160,.82))
      drop-shadow(0 0 20px rgba(255,0,118,.40))
      drop-shadow(0 4px 7px rgba(20,0,16,.72));
  }
  .panel h1{
    text-shadow:
      0 3px 4px rgba(25,0,18,.85),
      0 0 13px rgba(255,25,146,.34);
  }
  .overline,.soon,.date{
    text-shadow:0 2px 5px rgba(18,0,14,.95),0 0 8px rgba(255,55,166,.28);
  }
  .countdown .unit{
    background:linear-gradient(180deg,rgba(47,4,35,.82),rgba(24,0,20,.88));
    box-shadow:
      inset 0 0 18px rgba(255,28,147,.10),
      0 5px 18px rgba(20,0,15,.36),
      0 0 9px rgba(255,38,153,.25);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
}

/* Planned-date note ("* ... may change") under the date pill. */
.date-star{margin-left:.35em;color:#ffb345}
.date-note{
  margin:1vh 0 0;max-width:min(100%,520px);text-align:center;
  font-size:clamp(10px,.95vw,14px);line-height:1.35;font-weight:700;letter-spacing:.04em;
  color:#ffd7e8;opacity:.92;text-shadow:0 2px 5px rgba(18,0,14,.95)
}
@media (orientation:portrait){
  .date-note{margin-top:.8vh;max-width:96%;font-size:clamp(9px,2.6vw,12px)}
}
@media (orientation:portrait) and (max-height:740px){
  .date-note{margin-top:.5vh;font-size:9px}
}

/* Portrait: the same shade as a bottom-up fade across the full width, so the
   logo, title and counter stay readable over the busy picture. */
@media (orientation:portrait){
  .panel{isolation:isolate}
  .panel::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    left:-12%;right:-12%;bottom:-4vh;top:-16vh;
    background:linear-gradient(0deg,
      rgba(22,0,16,.82) 0%,
      rgba(34,0,23,.74) 30%,
      rgba(48,0,31,.55) 52%,
      rgba(58,0,38,.32) 72%,
      rgba(58,0,38,.12) 88%,
      transparent 100%)
  }
  .logo{filter:drop-shadow(0 0 7px rgba(255,39,160,.7)) drop-shadow(0 4px 7px rgba(20,0,16,.75))}
  .panel h1{text-shadow:0 3px 4px rgba(25,0,18,.85),0 0 13px rgba(255,25,146,.30)}
  .overline,.soon,.date{text-shadow:0 2px 5px rgba(18,0,14,.95),0 0 8px rgba(255,55,166,.25)}
}