:root {
  --white:#f8f5f0;
  --pink:#f2a8cd;
  --blue:#9adfff;
  --cycle:18s;
  --sans:"DM Sans",Arial,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --script:"Italianno","Times New Roman",cursive;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#020610}
body{overflow:hidden;color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}

.teaser{
  position:relative;width:100%;height:100vh;height:100svh;height:100dvh;
  overflow:hidden;isolation:isolate;background:#020610;
}

/* Existing teaser ambience */
.opening-bg{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 18% 42%,rgba(35,142,208,.30),transparent 35%),
    radial-gradient(circle at 84% 40%,rgba(205,66,132,.30),transparent 37%),
    radial-gradient(circle at 50% 42%,rgba(26,34,56,.38),transparent 42%),
    linear-gradient(112deg,#03111f 0%,#050813 46%,#1a0916 100%);
  animation:openingScene var(--cycle) ease-in-out infinite;
}
.opening-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 22%,rgba(2,5,12,.09) 62%,rgba(2,5,12,.36) 100%)}

/* Hero: true crossfade. The artwork itself never blurs, scales, or changes colour. */
.hero-reveal{
  position:absolute;inset:0;z-index:4;overflow:hidden;
  opacity:0;
  will-change:opacity;
  animation:heroReveal var(--cycle) linear infinite;
}
.hero-image{
  position:absolute;inset:0;
  background:url("assets/images/hero-teaser-banner.png") center/cover no-repeat;
}
.center-bloom{
  position:absolute;left:50%;top:42%;width:17vw;height:17vw;min-width:150px;min-height:150px;
  transform:translate(-50%,-50%) scale(.72);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(242,168,205,.09) 34%,transparent 70%);
  opacity:0;filter:blur(22px);animation:centerBloom var(--cycle) ease-in-out infinite;
}

/* Ambient foreground motion stays active throughout the full loop. */
.ambient-motion{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden;animation:ambientPresence var(--cycle) ease-in-out infinite}
.water-field,.clover-field,.sakura-field{position:absolute;inset:0}

.droplet{position:absolute;border-radius:50%;border:1px solid rgba(174,229,255,.55);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.82),rgba(105,207,255,.17) 30%,transparent 68%);box-shadow:inset 0 0 7px rgba(255,255,255,.12),0 0 10px rgba(75,187,242,.14);animation:dropletRise 8.5s linear infinite}
.d1{width:10px;height:10px;left:7%;bottom:-4%;animation-delay:-1s}.d2{width:17px;height:17px;left:14%;bottom:-7%;animation-delay:-5.2s}.d3{width:7px;height:7px;left:22%;bottom:-4%;animation-delay:-2.8s}.d4{width:22px;height:22px;left:29%;bottom:-8%;animation-delay:-7s}.d5{width:8px;height:8px;left:34%;bottom:-4%;animation-delay:-4.1s}.d6{width:13px;height:13px;left:18%;bottom:-5%;animation-delay:-6.1s}.d7{width:6px;height:6px;left:10%;bottom:-3%;animation-delay:-3.3s}.d8{width:15px;height:15px;left:38%;bottom:-6%;animation-delay:-8s}.d9{width:9px;height:9px;left:25%;bottom:-4%;animation-delay:-.2s}

.clover{position:absolute;left:0;color:#7fca42;text-shadow:0 0 9px rgba(124,211,73,.28);font-size:clamp(14px,1.5vw,26px);opacity:.54;animation:cloverDrift 10s ease-in-out infinite alternate}
.c1{left:8%;top:22%;animation-delay:-2s}.c2{left:18%;top:50%;font-size:clamp(11px,1.15vw,21px);animation-delay:-7s}.c3{left:30%;top:16%;font-size:clamp(10px,1vw,18px);animation-delay:-4s}.c4{left:12%;top:71%;font-size:clamp(9px,.9vw,17px);animation-delay:-8s}.c5{left:35%;top:62%;font-size:clamp(8px,.8vw,15px);animation-delay:-5s}

.petal{position:absolute;right:0;width:12px;height:7px;border-radius:75% 25% 70% 30%;background:linear-gradient(135deg,rgba(255,202,226,.94),rgba(217,108,162,.54));box-shadow:0 0 8px rgba(242,150,195,.14);animation:sakuraFall 10.5s linear infinite}
.p1{right:7%;top:-5%;animation-delay:-1s}.p2{right:14%;top:-7%;transform:scale(.7);animation-delay:-5s}.p3{right:21%;top:-4%;transform:scale(1.2);animation-delay:-8s}.p4{right:29%;top:-6%;transform:scale(.8);animation-delay:-3s}.p5{right:37%;top:-5%;transform:scale(.65);animation-delay:-6.5s}.p6{right:11%;top:-8%;transform:scale(1.1);animation-delay:-9s}.p7{right:25%;top:-7%;transform:scale(.9);animation-delay:-2s}.p8{right:33%;top:-6%;transform:scale(.72);animation-delay:-7.5s}.p9{right:42%;top:-5%;transform:scale(.6);animation-delay:-4.5s}

/* Typography */
.sequence{opacity:0;will-change:opacity,transform}
.top-brand{position:absolute;z-index:20;top:clamp(24px,4.7vh,46px);left:50%;display:flex;align-items:center;gap:15px;transform:translateX(-50%);white-space:nowrap;color:rgba(255,255,255,.92);font-size:clamp(8px,.68vw,12px);font-weight:600;letter-spacing:.42em;text-shadow:0 2px 12px rgba(0,0,0,.42)}
.top-brand .heart{color:var(--pink);font-size:.9em;letter-spacing:0;filter:drop-shadow(0 0 8px rgba(242,168,205,.45))}

.hero-copy{position:absolute;z-index:20;left:50%;top:71.5%;width:min(92vw,960px);transform:translate(-50%,-50%);text-align:center;text-shadow:0 4px 28px rgba(0,0,0,.88),0 1px 8px rgba(0,0,0,.76)}
.hero-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:min(102vw,1140px);height:135%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(2,6,15,.58) 0%,rgba(2,6,15,.30) 42%,transparent 73%);filter:blur(15px)}
.eyebrow{display:inline-block;margin:0 0 clamp(12px,1.5vh,18px);padding:7px 13px 6px;border-radius:999px;color:#d9f3ff;background:rgba(2,8,18,.46);box-shadow:0 0 24px rgba(0,0,0,.18);font-size:clamp(9px,.76vw,12px);font-weight:700;letter-spacing:.35em;text-shadow:0 2px 10px rgba(0,0,0,.95)}
.hero-title{margin:0;font-weight:500}.headline-main,.headline-bloom{display:block}
.headline-main{font-family:var(--serif);color:#fffaf5;font-size:clamp(42px,5vw,82px);line-height:.94;letter-spacing:-.052em;font-weight:500}
.headline-bloom{margin-top:clamp(-4px,-.2vw,-1px);font-family:var(--script);color:#f0a4cf;font-size:clamp(50px,6vw,98px);line-height:.74;font-weight:400;letter-spacing:.005em}
.identity{display:flex;justify-content:center;align-items:center;gap:clamp(20px,2.3vw,38px);margin:clamp(27px,3.5vh,40px) 0 0;color:rgba(255,255,255,.96);font-size:clamp(10px,.88vw,14px);font-weight:600;letter-spacing:.47em}.identity .pair-x{color:var(--blue);font-size:.9em;letter-spacing:0}
.coming{margin:clamp(15px,1.9vh,21px) auto 0;display:flex;justify-content:center;align-items:center;gap:clamp(15px,1.8vw,27px);color:rgba(255,255,255,.78);font-size:clamp(7px,.61vw,10px);font-weight:600;letter-spacing:.47em}.coming .line{width:clamp(40px,4.1vw,70px);height:1px;background:linear-gradient(90deg,transparent,rgba(242,168,205,.74))}.coming .line:last-child{transform:scaleX(-1)}
.footer{position:absolute;z-index:20;left:clamp(24px,3vw,52px);right:clamp(24px,3vw,52px);bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.48);font-size:clamp(6px,.48vw,8px);font-weight:500;letter-spacing:.24em}
.vignette{position:absolute;inset:0;z-index:18;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 40%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.28) 100%)}

/* 18s loop: 0–2 ambient, 2–3.8 hero, 4–7 text, 7–13 hold, 13–15 exit, 15–18 reset */
.sequence-brand{animation:seqBrand var(--cycle) ease-in-out infinite}.sequence-eyebrow{animation:seqEyebrow var(--cycle) ease-in-out infinite}.sequence-headline{animation:seqHeadline var(--cycle) cubic-bezier(.18,.8,.22,1) infinite}.sequence-bloom{animation:seqBloom var(--cycle) cubic-bezier(.18,.8,.22,1) infinite}.sequence-identity{animation:seqIdentity var(--cycle) ease-in-out infinite}.sequence-coming{animation:seqComing var(--cycle) ease-in-out infinite}.sequence-footer{animation:seqFooter var(--cycle) ease-in-out infinite}

@keyframes openingScene{
  0%,8%{opacity:1}
  12%{opacity:.92}
  18%{opacity:.56}
  24%,74%{opacity:.12}
  80%{opacity:.38}
  87%{opacity:.80}
  92%,100%{opacity:1}
}
@keyframes heroReveal{
  0%,8%{opacity:0}
  12%{opacity:.10}
  16%{opacity:.32}
  20%{opacity:.65}
  24%,74%{opacity:1}
  80%{opacity:.76}
  84%{opacity:.48}
  88%{opacity:.18}
  92%,100%{opacity:0}
}
@keyframes centerBloom{0%,10%,89%,100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}16%{opacity:.34;transform:translate(-50%,-50%) scale(.92)}22%{opacity:.16;transform:translate(-50%,-50%) scale(1.12)}30%,72%{opacity:.06;transform:translate(-50%,-50%) scale(1.04)}82%{opacity:0}}
@keyframes ambientPresence{0%,10%,90%,100%{opacity:.92}18%,78%{opacity:.56}}

/* Text has no blur: only opacity + tiny movement. */
@keyframes seqBrand{0%,22%{opacity:0;transform:translateX(-50%) translateY(7px)}27%,75%{opacity:1;transform:translateX(-50%) translateY(0)}81%,100%{opacity:0;transform:translateX(-50%) translateY(-4px)}}
@keyframes seqEyebrow{0%,25%{opacity:0;transform:translateY(12px)}30%,75%{opacity:1;transform:translateY(0)}81%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes seqHeadline{0%,29%{opacity:0;transform:translateY(16px)}34%,75%{opacity:1;transform:translateY(0)}81%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes seqBloom{0%,33%{opacity:0;transform:translateY(15px)}38%,75%{opacity:1;transform:translateY(0)}81%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes seqIdentity{0%,37%{opacity:0;transform:translateY(10px)}42%,75%{opacity:1;transform:translateY(0)}81%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes seqComing{0%,41%{opacity:0;transform:translateY(8px)}46%,75%{opacity:1;transform:translateY(0)}81%,100%{opacity:0;transform:translateY(-2px)}}
@keyframes seqFooter{0%,44%{opacity:0}49%,75%{opacity:1}81%,100%{opacity:0}}

@keyframes dropletRise{0%{transform:translate3d(0,0,0) scale(.72);opacity:0}10%{opacity:.58}50%{transform:translate3d(24px,-53vh,0) scale(1);opacity:.55}90%{opacity:.30}100%{transform:translate3d(48px,-112vh,0) scale(.82);opacity:0}}
@keyframes cloverDrift{0%{transform:translate3d(-7px,5px,0) rotate(-12deg) scale(.9);opacity:.38}50%{opacity:.63}100%{transform:translate3d(14px,-13px,0) rotate(22deg) scale(1.05);opacity:.48}}
@keyframes sakuraFall{0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}9%{opacity:.62}48%{transform:translate3d(-48px,50vh,0) rotate(180deg);opacity:.56}90%{opacity:.38}100%{transform:translate3d(-92px,112vh,0) rotate(380deg);opacity:0}}

/* Responsive layouts -------------------------------------------------- */

/* Desktop / laptop landscape: keep the artwork dominant and place the
   full copy in the darker lower-third safe area. */
@media (min-width:1280px) and (min-height:701px){
  .hero-image{background-size:cover;background-position:center 43%}
  .top-brand{top:clamp(28px,4.2vh,48px)}
  .hero-copy{top:73%;width:min(88vw,980px)}
  .hero-copy::before{width:min(96vw,1160px);height:138%}
  .eyebrow{margin-bottom:clamp(10px,1.25vh,16px);font-size:clamp(9px,.70vw,11px)}
  .headline-main{font-size:clamp(54px,4.7vw,82px);line-height:.92}
  .headline-bloom{font-size:clamp(62px,5.5vw,96px);line-height:.75}
  .identity{margin-top:clamp(24px,3vh,36px)}
  .coming{margin-top:clamp(13px,1.6vh,19px)}
}

/* Tablet landscape: scale the text as a unit so it never competes with the
   mascots or drops below the visible viewport. */
@media (min-width:761px) and (max-width:1279px) and (orientation:landscape) and (min-height:701px){
  .hero-image{background-size:cover;background-position:center 42%}
  .top-brand{top:clamp(22px,3.8vh,34px);font-size:clamp(8px,.82vw,10px);gap:12px}
  .hero-copy{top:72%;width:min(88vw,820px);padding:0 18px}
  .hero-copy::before{width:min(98vw,940px);height:142%}
  .eyebrow{margin-bottom:10px;font-size:clamp(8px,.75vw,10px);letter-spacing:.31em}
  .headline-main{font-size:clamp(44px,5vw,66px);line-height:.92}
  .headline-bloom{font-size:clamp(52px,6vw,78px);line-height:.76}
  .identity{margin-top:22px;gap:28px;font-size:clamp(9px,.85vw,12px)}
  .coming{margin-top:12px;font-size:clamp(7px,.65vw,9px)}
  .coming .line{width:44px}
  .footer{font-size:6px;left:24px;right:24px}
}

/* Tablet portrait: treat the 16:9 artwork as a large cinematic panel rather
   than cropping it like a desktop background. The copy gets a dedicated
   lower safe area. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .hero-image{
    background-size:128% auto;
    background-repeat:no-repeat;
    background-position:center 13%;
  }
  .center-bloom{top:35%}
  .top-brand{top:max(28px,env(safe-area-inset-top));font-size:10px;gap:13px;letter-spacing:.36em}
  .hero-copy{top:70.5%;width:min(90vw,760px);padding:0 24px}
  .hero-copy::before{width:100vw;height:146%}
  .eyebrow{margin-bottom:12px;font-size:9px;letter-spacing:.31em}
  .headline-main{font-size:clamp(48px,7.4vw,70px);line-height:.92}
  .headline-bloom{font-size:clamp(58px,8.7vw,84px);line-height:.76}
  .identity{margin-top:27px;gap:30px;font-size:11px;letter-spacing:.40em}
  .coming{margin-top:14px;gap:14px;font-size:8px;letter-spacing:.38em}
  .coming .line{width:42px}
  .footer{left:24px;right:24px;bottom:max(16px,env(safe-area-inset-bottom));font-size:6px;letter-spacing:.17em}
}

/* Portrait phones: preserve the full visual story and reserve the lower
   portion for typography. */
@media (max-width:760px) and (orientation:portrait){
  .teaser{height:100svh;height:100dvh;min-height:0}
  .hero-image{
    inset:0;
    background-size:145% auto;
    background-repeat:no-repeat;
    background-position:center 15%;
  }
  .center-bloom{top:34%}
  .top-brand{
    top:max(22px,env(safe-area-inset-top));
    gap:10px;
    font-size:9px;
    letter-spacing:.31em;
  }
  .hero-copy{
    top:68%;
    width:94vw;
    padding:0 18px;
  }
  .hero-copy::before{height:145%;width:108vw;opacity:.92}
  .eyebrow{
    margin-bottom:12px;
    padding:6px 10px 5px;
    font-size:8px;
    letter-spacing:.23em;
  }
  .headline-main{
    font-size:clamp(38px,10.6vw,54px);
    line-height:.91;
  }
  .headline-bloom{
    margin-top:2px;
    font-size:clamp(48px,13.2vw,68px);
    line-height:.78;
  }
  .identity{
    margin-top:25px;
    gap:22px;
    font-size:10px;
    letter-spacing:.34em;
  }
  .coming{
    margin-top:14px;
    gap:10px;
    font-size:7px;
    letter-spacing:.32em;
  }
  .coming .line{width:28px}
  .footer{
    left:16px;right:16px;
    bottom:max(12px,env(safe-area-inset-bottom));
    font-size:6px;
    letter-spacing:.13em;
  }
  .clover{opacity:.40}
}

/* Short landscape viewports (phones and compact tablets): fit the full text
   stack above browser chrome and avoid off-screen content. */
@media (orientation:landscape) and (max-height:700px){
  .teaser{height:100svh;height:100dvh;min-height:0}
  .hero-image{background-size:cover;background-position:center 42%}
  .top-brand{
    top:clamp(12px,3.5vh,24px);
    font-size:clamp(7px,1.05vw,10px);
    gap:10px;
    letter-spacing:.32em;
  }
  .hero-copy{top:69%;width:min(86vw,760px)}
  .hero-copy::before{height:150%;width:min(96vw,900px)}
  .eyebrow{
    margin-bottom:7px;
    padding:4px 9px 3px;
    font-size:clamp(6px,.85vw,9px);
    letter-spacing:.27em;
  }
  .headline-main{font-size:clamp(28px,4.5vw,54px);line-height:.90}
  .headline-bloom{margin-top:-1px;font-size:clamp(34px,5.4vw,64px);line-height:.72}
  .identity{margin-top:clamp(13px,2.6vh,20px);gap:clamp(15px,2vw,26px);font-size:clamp(7px,.9vw,10px);letter-spacing:.34em}
  .coming{margin-top:clamp(8px,1.5vh,12px);gap:10px;font-size:clamp(5px,.68vw,8px);letter-spacing:.33em}
  .coming .line{width:32px}
  .footer{left:18px;right:18px;bottom:max(7px,env(safe-area-inset-bottom));font-size:5px;letter-spacing:.13em}
}

/* Extra-short landscape Safari / in-app browser viewport. */
@media (orientation:landscape) and (max-height:520px){
  .top-brand{top:10px}
  .hero-copy{top:66%}
  .eyebrow{margin-bottom:5px}
  .headline-main{font-size:clamp(25px,4vw,44px)}
  .headline-bloom{font-size:clamp(30px,4.8vw,52px)}
  .identity{margin-top:9px}
  .coming{margin-top:5px}
  .footer{bottom:5px}
}

@media(prefers-reduced-motion:reduce){
  .opening-bg,.hero-reveal,.center-bloom,.ambient-motion,.droplet,.clover,.petal,.sequence{animation:none!important}
  .hero-reveal,.sequence{opacity:1!important;transform:none!important}
  .hero-reveal{filter:none!important}
  .top-brand{transform:translateX(-50%)!important}
}

/* =====================================================================
   v17 RESPONSIVE COMPOSITION FIX
   The 16:9 artwork is no longer forced to fill every viewport.
   Portrait and short-landscape layouts preserve the complete hero image,
   while the typography is kept in a guaranteed safe area.
   ===================================================================== */

/* Portrait phones: full-width 16:9 hero panel, never crop the artwork. */
@media (max-width:760px) and (orientation:portrait){
  .hero-reveal{
    inset:0 0 auto 0;
    height:55dvh;
    min-height:0;
    overflow:visible;
  }
  .hero-image{
    inset:0;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center top;
  }
  .center-bloom{top:29%;}

  .top-brand{
    top:max(20px,env(safe-area-inset-top));
    font-size:8px;
    letter-spacing:.30em;
  }

  .hero-copy{
    top:auto;
    bottom:clamp(94px,12dvh,128px);
    width:94vw;
    transform:translateX(-50%);
    padding:0 18px;
  }
  .hero-copy::before{
    width:110vw;
    height:138%;
    opacity:.96;
  }
  .eyebrow{
    margin-bottom:10px;
    font-size:7.5px;
    letter-spacing:.22em;
    padding:5px 9px 4px;
  }
  .headline-main{
    font-size:clamp(34px,9.6vw,48px);
    line-height:.92;
  }
  .headline-bloom{
    margin-top:0;
    font-size:clamp(43px,11.8vw,61px);
    line-height:.77;
  }
  .identity{
    margin-top:21px;
    gap:20px;
    font-size:9px;
  }
  .coming{
    margin-top:11px;
    font-size:6.5px;
    gap:9px;
  }
  .coming .line{width:25px;}
  .footer{
    left:14px;
    right:14px;
    bottom:max(10px,env(safe-area-inset-bottom));
    font-size:5.5px;
    letter-spacing:.11em;
  }
}

/* Taller portrait phones can give the hero a little more visual room. */
@media (max-width:760px) and (orientation:portrait) and (min-height:780px){
  .hero-reveal{height:58dvh;}
  .hero-copy{bottom:clamp(100px,11dvh,132px);}
}

/* Tablet portrait: preserve the complete artwork as a large 16:9 panel. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .hero-reveal{
    inset:0 0 auto 0;
    height:58dvh;
    overflow:visible;
  }
  .hero-image{
    inset:0;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center top;
  }
  .center-bloom{top:30%;}
  .hero-copy{
    top:auto;
    bottom:clamp(92px,10dvh,138px);
    width:min(90vw,760px);
    transform:translateX(-50%);
  }
  .headline-main{font-size:clamp(46px,6.7vw,66px);}
  .headline-bloom{font-size:clamp(56px,8vw,78px);}
  .identity{margin-top:24px;}
}

/* Short landscape phones/tablets: show the COMPLETE 16:9 artwork with
   letterboxing instead of cover-cropping, then keep the entire text stack
   compact inside the viewport. */
@media (orientation:landscape) and (max-height:700px){
  .hero-reveal{inset:0;}
  .hero-image{
    inset:0;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
  }
  .opening-bg{
    background:
      radial-gradient(circle at 18% 42%,rgba(35,142,208,.30),transparent 35%),
      radial-gradient(circle at 84% 40%,rgba(205,66,132,.30),transparent 37%),
      linear-gradient(112deg,#03111f 0%,#050813 46%,#1a0916 100%);
  }
  .center-bloom{top:42%;}
  .top-brand{
    top:max(9px,env(safe-area-inset-top));
    font-size:7px;
    gap:9px;
    letter-spacing:.30em;
  }
  .hero-copy{
    top:auto;
    bottom:clamp(34px,6dvh,54px);
    width:min(76vw,700px);
    transform:translateX(-50%);
    padding:0 12px;
  }
  .hero-copy::before{
    width:min(88vw,820px);
    height:132%;
    filter:blur(11px);
  }
  .eyebrow{
    margin-bottom:4px;
    padding:3px 8px 3px;
    font-size:6px;
    letter-spacing:.24em;
  }
  .headline-main{
    font-size:min(7.0dvh,4.2vw);
    line-height:.91;
  }
  .headline-bloom{
    margin-top:-1px;
    font-size:min(8.2dvh,5vw);
    line-height:.72;
  }
  .identity{
    margin-top:min(2.2dvh,12px);
    gap:18px;
    font-size:min(1.55dvh,8px);
    letter-spacing:.31em;
  }
  .coming{
    margin-top:min(1.4dvh,7px);
    gap:8px;
    font-size:min(1.15dvh,6px);
    letter-spacing:.29em;
  }
  .coming .line{width:26px;}
  .footer{
    left:16px;
    right:16px;
    bottom:max(5px,env(safe-area-inset-bottom));
    font-size:4.5px;
    letter-spacing:.11em;
  }
}

/* Extra-short landscape browser viewports: prioritize fitting all copy. */
@media (orientation:landscape) and (max-height:520px){
  .top-brand{top:max(6px,env(safe-area-inset-top));font-size:6px;}
  .hero-copy{bottom:25px;width:min(72vw,620px);}
  .eyebrow{font-size:5px;margin-bottom:3px;}
  .headline-main{font-size:min(6.4dvh,3.7vw);}
  .headline-bloom{font-size:min(7.4dvh,4.4vw);}
  .identity{margin-top:6px;font-size:5.5px;}
  .coming{margin-top:3px;font-size:4.5px;}
  .footer{bottom:3px;font-size:4px;}
}

/* =====================================================================
   v18 HYBRID RESPONSIVE COMPOSITION
   Portrait = complete 16:9 hero + blended continuation.
   Landscape = full-bleed hero + viewport-safe lower-third copy.
   ===================================================================== */

@keyframes openingScenePortrait{
  0%,8%{opacity:1}
  12%{opacity:.96}
  18%{opacity:.82}
  24%,74%{opacity:.62}
  80%{opacity:.72}
  87%{opacity:.90}
  92%,100%{opacity:1}
}

/* ---------- PORTRAIT PHONES ---------- */
@media (max-width:760px) and (orientation:portrait){
  .opening-bg{animation:openingScenePortrait var(--cycle) ease-in-out infinite}

  .hero-reveal{
    inset:0 0 auto 0;
    height:calc(56.25vw + 72px);
    min-height:0;
    overflow:hidden;
  }
  .hero-image{
    inset:0 0 auto 0;
    height:56.25vw;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 86%,rgba(0,0,0,.55) 94%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 86%,rgba(0,0,0,.55) 94%,transparent 100%);
  }
  .center-bloom{top:28vw}

  .top-brand{
    top:max(18px,env(safe-area-inset-top));
    font-size:8px;
    gap:9px;
    letter-spacing:.30em;
  }

  .hero-copy{
    top:calc(56.25vw + 54px);
    bottom:auto;
    width:94vw;
    transform:translateX(-50%);
    padding:0 16px;
  }
  .hero-copy::before{
    width:108vw;
    height:145%;
    opacity:.84;
    background:radial-gradient(ellipse at center,rgba(2,6,15,.48) 0%,rgba(2,6,15,.22) 48%,transparent 76%);
  }
  .eyebrow{
    margin-bottom:9px;
    padding:5px 9px 4px;
    font-size:7.5px;
    letter-spacing:.22em;
  }
  .headline-main{
    font-size:clamp(34px,9.8vw,48px);
    line-height:.92;
  }
  .headline-bloom{
    margin-top:0;
    font-size:clamp(42px,12vw,60px);
    line-height:.78;
  }
  .identity{
    margin-top:20px;
    gap:20px;
    font-size:9px;
    letter-spacing:.34em;
  }
  .coming{
    margin-top:11px;
    gap:9px;
    font-size:6.5px;
    letter-spacing:.31em;
  }
  .coming .line{width:25px}
  .footer{
    left:14px;right:14px;
    bottom:max(10px,env(safe-area-inset-bottom));
    font-size:5.5px;
    letter-spacing:.11em;
  }
}

/* Taller portrait phones: only a little more breathing room, not a huge gap. */
@media (max-width:760px) and (orientation:portrait) and (min-height:780px){
  .hero-copy{top:calc(56.25vw + 66px)}
}

/* ---------- TABLET PORTRAIT ---------- */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .opening-bg{animation:openingScenePortrait var(--cycle) ease-in-out infinite}

  .hero-reveal{
    inset:0 0 auto 0;
    height:calc(56.25vw + 105px);
    min-height:0;
    overflow:hidden;
  }
  .hero-image{
    inset:0 0 auto 0;
    height:56.25vw;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.9) 87%,rgba(0,0,0,.48) 95%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.9) 87%,rgba(0,0,0,.48) 95%,transparent 100%);
  }
  .center-bloom{top:27vw}
  .top-brand{top:max(25px,env(safe-area-inset-top));font-size:9px}

  .hero-copy{
    top:calc(56.25vw + 78px);
    bottom:auto;
    width:min(90vw,760px);
    transform:translateX(-50%);
    padding:0 24px;
  }
  .hero-copy::before{width:100vw;height:145%;opacity:.84}
  .eyebrow{margin-bottom:10px;font-size:8.5px}
  .headline-main{font-size:clamp(46px,7vw,68px)}
  .headline-bloom{font-size:clamp(56px,8.3vw,82px)}
  .identity{margin-top:25px}
  .coming{margin-top:13px}
}

/* ---------- LANDSCAPE PHONES / TABLETS ---------- */
@media (orientation:landscape) and (max-height:700px){
  .hero-reveal{inset:0;height:auto;overflow:hidden}
  .hero-image{
    inset:0;
    height:auto;
    background-size:cover;
    background-position:center 45%;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .top-brand{
    top:clamp(10px,2.8vh,18px);
    font-size:clamp(6.5px,.78vw,9px);
    gap:9px;
  }
  .hero-copy{
    top:67%;
    bottom:auto;
    width:min(80vw,720px);
    transform:translate(-50%,-50%);
  }
  .hero-copy::before{width:min(90vw,840px);height:148%;opacity:.82}
  .eyebrow{margin-bottom:5px;padding:3px 8px 2px;font-size:clamp(5.5px,.62vw,8px)}
  .headline-main{font-size:clamp(26px,4.1vw,48px);line-height:.90}
  .headline-bloom{font-size:clamp(31px,4.8vw,56px);line-height:.72}
  .identity{margin-top:clamp(9px,2vh,15px);gap:18px;font-size:clamp(6.5px,.72vw,9px)}
  .coming{margin-top:clamp(5px,1.1vh,9px);gap:9px;font-size:clamp(5px,.56vw,7px)}
  .coming .line{width:28px}
  .footer{left:16px;right:16px;bottom:max(5px,env(safe-area-inset-bottom));font-size:4.5px}
}

/* Extra-short landscape browser viewport. */
@media (orientation:landscape) and (max-height:520px){
  .hero-copy{top:64%}
  .headline-main{font-size:clamp(24px,3.8vw,40px)}
  .headline-bloom{font-size:clamp(28px,4.4vw,47px)}
  .identity{margin-top:7px}
  .coming{margin-top:4px}
}

/* ---------- DESKTOP / LARGE LANDSCAPE ---------- */
@media (min-width:1101px) and (orientation:landscape) and (min-height:701px){
  .hero-reveal{inset:0;height:auto;overflow:hidden}
  .hero-image{
    inset:0;
    height:auto;
    background-size:cover;
    background-position:center 44%;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .hero-copy{top:72%;width:min(86vw,980px)}
}

/* =====================================================================
   PROJECT 1111 — COUNTDOWN + COMPACT YOUTUBE SOUNDTRACK
   Launch: 11 Nov 2026, 10:11 Bangkok / 11:11 Manila
   ===================================================================== */
.launch-block{margin:clamp(14px,1.8vh,20px) auto 0;text-align:center;color:rgba(255,255,255,.90)}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(7px,1vw,15px)}
.count-unit{display:grid;justify-items:center;min-width:clamp(42px,4.4vw,66px)}
.count-unit strong{font-family:var(--serif);font-size:clamp(20px,2vw,31px);line-height:1;font-weight:500;letter-spacing:.04em;color:#fffaf5;font-variant-numeric:tabular-nums}
.count-unit span{margin-top:6px;font-size:clamp(5px,.45vw,7px);font-weight:600;letter-spacing:.28em;color:rgba(255,255,255,.58)}
.count-sep{margin-top:-2px;font-family:var(--serif);font-size:clamp(18px,1.8vw,28px);line-height:1;color:rgba(154,223,255,.68)}
.launch-date{margin:9px 0 0;font-size:clamp(7px,.60vw,10px);font-weight:600;letter-spacing:.42em;color:rgba(255,255,255,.78)}
.launch-time{margin:5px 0 0;font-size:clamp(6px,.50vw,8px);font-weight:500;letter-spacing:.22em;color:rgba(255,255,255,.52)}
.launch-time span{padding:0 5px;color:var(--pink)}

.soundtrack{position:absolute;z-index:25;right:clamp(18px,2.5vw,42px);bottom:clamp(42px,6vh,68px);width:clamp(190px,15vw,250px);text-shadow:none}
.soundtrack-label{display:flex;align-items:center;gap:7px;margin:0 0 6px 2px;font-size:7px;font-weight:600;letter-spacing:.28em;color:rgba(255,255,255,.62)}
.music-note{color:var(--pink);font-size:12px;line-height:1}
.soundtrack-frame{height:70px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(2,6,15,.64);box-shadow:0 8px 28px rgba(0,0,0,.20);backdrop-filter:blur(8px)}
.soundtrack-frame iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:760px) and (orientation:portrait){
  .launch-block{margin-top:10px}
  .countdown{gap:5px}
  .count-unit{min-width:38px}
  .count-unit strong{font-size:18px}
  .count-unit span{font-size:5px;margin-top:4px}
  .count-sep{font-size:17px}
  .launch-date{margin-top:6px;font-size:6.5px}
  .launch-time{margin-top:4px;font-size:5.5px}
  .soundtrack{right:50%;bottom:38px;transform:translateX(50%);width:min(210px,58vw)}
  .soundtrack-frame{height:58px;border-radius:8px}
  .soundtrack-label{font-size:6px;margin-bottom:4px}
}

@media (orientation:landscape) and (max-height:700px){
  .launch-block{margin-top:5px}
  .count-unit{min-width:31px}
  .count-unit strong{font-size:clamp(13px,2.4vh,18px)}
  .count-unit span{margin-top:2px;font-size:4px}
  .count-sep{font-size:14px}
  .launch-date{margin-top:3px;font-size:4.5px}
  .launch-time{margin-top:2px;font-size:4px}
  .soundtrack{right:14px;bottom:24px;width:170px}
  .soundtrack-frame{height:52px}
  .soundtrack-label{font-size:5px;margin-bottom:3px}
}


/* =====================================================================
   PROJECT 1111 v4 — STABLE COUNTDOWN COMPOSITION + MINIMAL MUSIC CONTROL
   ===================================================================== */
/* Keep all essential information continuously readable. Ambient particles
   may move, but the hero and content no longer enter/exit on the 18s loop. */
.hero-reveal,
.sequence,
.top-brand,
.hero-copy .eyebrow,
.hero-copy .headline-main,
.hero-copy .headline-bloom,
.hero-copy .identity,
.hero-copy .launch-block,
.footer{
  animation:none!important;
  opacity:1!important;
  filter:none!important;
}
.hero-reveal{transform:none!important}
.sequence{transform:none!important}

/* Countdown is the visual anchor. */
.launch-block{
  position:relative;
  z-index:30;
  padding:10px 14px 9px;
  width:max-content;
  max-width:96vw;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(2,6,15,.34),rgba(2,6,15,.56));
  box-shadow:0 10px 38px rgba(0,0,0,.18);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.count-unit strong{font-variant-numeric:tabular-nums lining-nums}

/* Aesthetic soundtrack control. YouTube remains the playback source. */
.soundtrack{
  position:absolute;
  z-index:40;
  right:clamp(18px,2.5vw,42px);
  bottom:clamp(42px,6vh,68px);
  width:clamp(218px,17vw,278px);
  text-shadow:none;
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
.music-player{
  position:relative;
  overflow:hidden;
  padding:12px 13px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(4,10,22,.78),rgba(10,8,20,.62));
  box-shadow:0 14px 38px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.music-player::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(154,223,255,.07),transparent 38%,rgba(242,168,205,.07));
}
.music-meta{position:relative;display:grid;gap:2px;padding-right:92px;min-width:0}
.music-kicker{font-size:6px;font-weight:700;letter-spacing:.27em;color:rgba(255,255,255,.52)}
.music-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif);font-size:13px;color:rgba(255,250,245,.94)}
.music-status{font-size:6px;letter-spacing:.12em;color:rgba(255,255,255,.45)}
.music-controls{position:absolute;z-index:2;right:10px;top:12px;display:flex;align-items:center;gap:5px}
.music-btn{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(255,255,255,.055);color:rgba(255,255,255,.84);font:inherit;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.music-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
.music-btn:active{transform:scale(.94)}
.music-btn:focus-visible{outline:2px solid rgba(154,223,255,.7);outline-offset:2px}
.music-play{width:32px;height:32px;border-color:rgba(242,168,205,.30);background:rgba(242,168,205,.11);font-size:10px}
.music-progress{position:relative;height:1px;margin:11px 0 7px;background:rgba(255,255,255,.10);overflow:hidden}
.music-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--pink));transition:width .5s linear}
.music-foot{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:5px;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.34)}
.music-foot a{color:rgba(255,255,255,.40);text-decoration:none}
.music-foot a:hover{color:rgba(255,255,255,.70)}
.yt-player{position:absolute!important;width:200px!important;height:200px!important;left:-9999px!important;top:-9999px!important;overflow:hidden!important}

@media (max-width:760px) and (orientation:portrait){
  .launch-block{padding:8px 9px 7px;border-radius:12px}
  .soundtrack{right:50%;bottom:42px;transform:translateX(50%)!important;width:min(260px,72vw)}
  .music-player{padding:10px 11px 8px;border-radius:14px}
  .music-meta{padding-right:86px}
  .music-title{font-size:11px}
  .music-controls{right:8px;top:9px}
  .music-btn{width:25px;height:25px}
  .music-play{width:29px;height:29px}
}
@media (orientation:landscape) and (max-height:700px){
  .launch-block{padding:5px 8px 4px;border-radius:10px}
  .soundtrack{right:12px;bottom:20px;width:205px}
  .music-player{padding:8px 9px 7px;border-radius:12px}
  .music-title{font-size:10px}.music-kicker,.music-status{font-size:5px}
  .music-controls{right:7px;top:7px}.music-btn{width:23px;height:23px}.music-play{width:27px;height:27px}
  .music-progress{margin:8px 0 5px}
}

/* =====================================================================
   PROJECT 1111 v5 — READABILITY + TRUE CENTER + ENHANCED AMBIENCE
   ===================================================================== */

/* v4 disabled transforms globally on .sequence, which also removed the
   centering transform from the top brand. Restore true viewport centering. */
.top-brand{
  left:50%!important;
  right:auto!important;
  width:max-content;
  margin-left:0!important;
  margin-right:0!important;
  transform:translateX(-50%)!important;
  color:rgba(255,255,255,.98);
  font-weight:700;
  text-shadow:0 2px 14px rgba(0,0,0,.82),0 0 18px rgba(255,255,255,.08);
}

/* Give the script line more breathing room below the serif headline. */
.headline-bloom{
  display:block;
  margin-top:clamp(10px,1.35vh,18px)!important;
  color:#f5afd5;
  text-shadow:0 3px 18px rgba(0,0,0,.58),0 0 18px rgba(242,168,205,.12);
}

/* Improve overall legibility while keeping the luxury/editorial treatment. */
.eyebrow{
  letter-spacing:.24em;
  color:rgba(236,248,255,.98);
  background:rgba(2,8,18,.58);
  border:1px solid rgba(255,255,255,.08);
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
.headline-main{
  color:#fffaf5;
  text-shadow:0 3px 18px rgba(0,0,0,.68),0 1px 3px rgba(0,0,0,.8);
}
.identity{
  color:#fff;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.count-unit strong{
  color:#fffdf8;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}
.count-unit span{
  color:rgba(255,255,255,.82);
  font-size:clamp(6px,.52vw,8px);
  font-weight:700;
}
.launch-date{
  color:rgba(255,255,255,.94);
  font-size:clamp(8px,.68vw,11px);
  font-weight:700;
  text-shadow:0 2px 9px rgba(0,0,0,.78);
}
.launch-time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,.8vw,13px);
  margin-top:7px;
  color:rgba(255,255,255,.94);
  font-size:clamp(8px,.72vw,11px);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:0 2px 9px rgba(0,0,0,.85);
}
.launch-time .launch-zone{padding:0;color:inherit;white-space:nowrap}
.launch-time .launch-dot{padding:0;color:var(--pink);font-size:1.12em}
.footer{
  color:rgba(255,255,255,.72);
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.82);
}
.thai-year{
  color:rgba(255,255,255,.86);
  font-size:1.18em;
  letter-spacing:.16em;
}
.music-kicker{color:rgba(255,255,255,.70)}
.music-title{color:#fffaf5}
.music-status{color:rgba(255,255,255,.62)}
.music-foot{color:rgba(255,255,255,.50)}
.music-foot a{color:rgba(255,255,255,.58)}

/* Make water bubbles and sakura petals more visible without overwhelming
   the hero artwork. */
.droplet{
  border-color:rgba(190,236,255,.78);
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.96),rgba(112,211,255,.27) 32%,rgba(64,154,221,.08) 56%,transparent 72%);
  box-shadow:inset 0 0 9px rgba(255,255,255,.22),0 0 14px rgba(87,198,255,.28);
  opacity:.92;
}
.petal{
  background:linear-gradient(135deg,rgba(255,221,237,.98),rgba(236,132,183,.78));
  box-shadow:0 0 10px rgba(242,150,195,.30);
  opacity:.94;
}
.clover{opacity:.68}

@media (max-width:760px) and (orientation:portrait){
  .headline-bloom{margin-top:9px!important}
  .eyebrow{letter-spacing:.17em;font-size:7.5px}
  .launch-time{gap:7px;margin-top:6px;font-size:7px;letter-spacing:.10em}
  .launch-date{font-size:7px}
  .count-unit span{font-size:5.5px}
  .footer{font-size:6px;color:rgba(255,255,255,.74)}
}

@media (orientation:landscape) and (max-height:700px){
  .headline-bloom{margin-top:clamp(4px,1vh,8px)!important}
  .eyebrow{letter-spacing:.18em}
  .launch-time{gap:5px;margin-top:3px;font-size:clamp(5px,.68vw,7px);letter-spacing:.08em}
  .launch-date{font-size:clamp(5px,.58vw,7px)}
  .count-unit span{font-size:4.5px}
  .footer{font-size:5px;color:rgba(255,255,255,.68)}
}

/* =====================================================================
   PROJECT 1111 v7 — 11:11 PM DAILY EXPERIENCE
   ===================================================================== */
:root{--bloom-progress:0}

/* Launch copy corrected to PM; hierarchy stays intentionally restrained. */
.count-unit span{font-size:clamp(7px,.58vw,9px)!important;color:rgba(255,255,255,.88)!important}
.launch-time{font-size:clamp(9px,.76vw,12px)!important;color:rgba(255,255,255,.98)!important}
.footer{font-size:clamp(7px,.52vw,9px)!important;color:rgba(255,255,255,.78)!important}
.music-kicker{font-size:8px!important;color:rgba(255,255,255,.82)!important}
.music-title{font-size:11px!important}.music-status{font-size:8px!important;color:rgba(255,255,255,.72)!important}
.music-foot{font-size:7px!important;color:rgba(255,255,255,.62)!important}

/* Progressive bloom: very subtle early, richer toward launch. */
.ambient-motion{filter:saturate(calc(1 + var(--bloom-progress)*.16))}
.clover{opacity:calc(.58 + var(--bloom-progress)*.24)!important}
.petal{opacity:calc(.72 + var(--bloom-progress)*.25)!important}
.droplet{opacity:calc(.72 + var(--bloom-progress)*.24)!important}

/* Daily Reveal — secondary to the master countdown. */
.daily-reveal{
  position:absolute;z-index:26;left:clamp(24px,3vw,52px);bottom:clamp(48px,7vh,78px);
  width:clamp(250px,21vw,330px);padding:17px 19px 14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  background:linear-gradient(135deg,rgba(5,15,29,.69),rgba(25,8,23,.60));
  box-shadow:0 16px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-shadow:0 2px 10px rgba(0,0,0,.68)
}
.daily-reveal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(154,223,255,.15),rgba(154,223,255,.9),rgba(242,168,205,.9),rgba(242,168,205,.15))}
.daily-glow{position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(circle at 15% 25%,rgba(154,223,255,.10),transparent 38%),radial-gradient(circle at 90% 75%,rgba(242,168,205,.10),transparent 40%)}
.daily-ornament{position:absolute;right:16px;top:13px;color:rgba(255,255,255,.60);font-size:12px}
.daily-day,.daily-label,.daily-title,.daily-symbols,.daily-next{position:relative;margin:0}
.daily-day{font-size:11px;font-weight:700;letter-spacing:.24em;color:#fff}
.daily-label{margin-top:5px;font-size:7px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.64)}
.daily-title{margin-top:10px;max-width:95%;font-family:var(--serif);font-size:clamp(15px,1.05vw,19px);line-height:1.25;font-weight:500;color:#fffaf5}
.daily-symbols{min-height:19px;margin-top:9px;font-size:15px;letter-spacing:.12em;filter:drop-shadow(0 2px 7px rgba(0,0,0,.42))}
.daily-next{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.09);font-size:7px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.61)}
.daily-next strong{font-size:9px;color:rgba(255,255,255,.94);letter-spacing:.11em}
.daily-yesterday{position:relative;margin:8px 0 0;padding:0;border:0;background:none;color:rgba(255,255,255,.61);font:600 7px var(--sans);letter-spacing:.17em;cursor:pointer}
.daily-yesterday:hover,.daily-yesterday:focus-visible{color:#fff}
.daily-previous{position:relative;margin-top:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.80)}
.daily-previous span{display:block;margin-bottom:4px;font-size:6px;font-weight:700;letter-spacing:.17em;color:rgba(154,223,255,.82)}
.daily-previous q{font:500 11px/1.35 var(--serif)}
.daily-reveal.is-launch{border-color:rgba(242,168,205,.40);box-shadow:0 0 38px rgba(242,168,205,.16),0 16px 42px rgba(0,0,0,.25)}
.daily-reveal.just-bloomed{animation:dailyBloom 1.8s ease}
@keyframes dailyBloom{0%{transform:scale(1)}28%{transform:scale(1.025);box-shadow:0 0 42px rgba(242,168,205,.25),0 16px 42px rgba(0,0,0,.25)}100%{transform:scale(1)}}

/* Midnight-style reveal moment at the actual 11:11 PM rollover. */
.reveal-flash{position:absolute;z-index:80;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%) scale(.96);padding:24px 32px;border-radius:22px;background:rgba(3,7,17,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;text-align:center;box-shadow:0 20px 80px rgba(0,0,0,.34)}
.reveal-flash strong{font-size:10px;letter-spacing:.28em;color:#fff}.reveal-flash span{font-size:19px}
.reveal-flash.is-active{visibility:visible;animation:revealMoment 3.6s ease both}
@keyframes revealMoment{0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}18%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}

/* Penguin ♥ Seal easter egg. */
.heart-easter{appearance:none;-webkit-appearance:none;padding:4px;margin:-4px;border:0;background:transparent;font:inherit;cursor:pointer}
.heart-secret{position:absolute;z-index:70;left:50%;top:10%;transform:translate(-50%,-8px);padding:9px 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(3,7,17,.68);backdrop-filter:blur(10px);color:rgba(255,255,255,.94);font-size:9px;letter-spacing:.08em;opacity:0;visibility:hidden;pointer-events:none}
.heart-secret.is-visible{visibility:visible;animation:secretMessage 2.6s ease both}
@keyframes secretMessage{0%{opacity:0;transform:translate(-50%,-5px)}18%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
.teaser.heart-found::before{content:"♡";position:absolute;z-index:69;left:50%;top:8%;color:#f5afd5;font-size:18px;pointer-events:none;animation:heartTravel 1.7s ease both}
@keyframes heartTravel{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(10vw,18vh) scale(1.25)}}

/* Responsive stacking: daily clue left, soundtrack right on wide screens;
   compact cards below the master countdown on portrait/mobile. */
@media (max-width:1100px) and (orientation:portrait){
  .daily-reveal{left:18px;right:18px;bottom:118px;width:auto;padding:12px 14px 10px;border-radius:14px}
  .daily-title{margin-top:6px;font-size:13px}.daily-symbols{margin-top:5px;font-size:13px;min-height:16px}
  .daily-next{margin-top:6px;padding-top:6px}.daily-yesterday{margin-top:5px}
  .soundtrack{right:18px!important;bottom:42px!important;width:190px!important;transform:none!important}
  .footer{bottom:14px!important}
}
@media (max-width:760px) and (orientation:portrait){
  .daily-reveal{left:12px;right:12px;bottom:112px;padding:10px 12px 9px}
  .daily-day{font-size:9px}.daily-label{font-size:6px}.daily-title{font-size:12px;line-height:1.2}.daily-symbols{font-size:12px}
  .daily-next{font-size:6px}.daily-next strong{font-size:8px}.daily-yesterday{font-size:6px}
  .music-kicker{font-size:6.5px!important}.music-title{font-size:9px!important}.music-status{font-size:6.5px!important}.music-foot{font-size:6px!important}
}
@media (orientation:landscape) and (max-height:700px){
  .daily-reveal{left:14px;bottom:30px;width:210px;padding:9px 11px 8px;border-radius:12px}
  .daily-day{font-size:8px}.daily-label{font-size:5px}.daily-title{margin-top:5px;font-size:10px}.daily-symbols{margin-top:4px;min-height:12px;font-size:10px}.daily-next{margin-top:4px;padding-top:4px;font-size:5px}.daily-next strong{font-size:6px}.daily-yesterday{font-size:5px;margin-top:3px}
  .soundtrack{right:14px!important;bottom:30px!important;width:170px!important}
}
@media (prefers-reduced-motion:reduce){.daily-reveal.just-bloomed,.reveal-flash.is-active,.heart-secret.is-visible,.teaser.heart-found::before{animation:none!important}.reveal-flash{display:none}.heart-secret.is-visible{opacity:1;visibility:visible}}

/* =====================================================================
   PROJECT 1111 v7.2 — MOBILE FLOW FIX
   Portrait phones use normal document flow so cards cannot overlap.
   Desktop and tablet landscape remain unchanged.
   ===================================================================== */
@media (max-width:760px) and (orientation:portrait){
  html,body{width:100%;height:auto!important;min-height:100%;background:#020610}
  body{overflow-x:hidden!important;overflow-y:auto!important}
  .teaser{position:relative;display:block;width:100%;height:auto!important;min-height:100svh!important;overflow:hidden!important;padding:0 0 max(22px,env(safe-area-inset-bottom))}

  .hero-reveal{position:absolute!important;inset:0 0 auto 0!important;width:100%!important;height:360px!important;transform:none!important}
  .hero-image{position:absolute!important;inset:0!important;width:100%!important;height:360px!important;background-size:auto 360px!important;background-position:center top!important;background-repeat:no-repeat!important}
  .center-bloom{top:155px!important}
  .opening-bg,.ambient-motion,.vignette{position:absolute!important;inset:0!important;min-height:100%!important}

  .top-brand{position:absolute!important;top:max(20px,env(safe-area-inset-top))!important;left:50%!important;right:auto!important;width:max-content!important;transform:translateX(-50%)!important;font-size:9px!important;gap:10px!important;letter-spacing:.31em!important}

  .hero-copy{position:relative!important;top:auto!important;left:auto!important;bottom:auto!important;transform:none!important;width:100%!important;margin:0!important;padding:350px 16px 0!important;text-align:center!important;z-index:20!important}
  .hero-copy::before{width:112vw!important;height:72%!important;top:70%!important;opacity:.94!important}
  .eyebrow{margin:0 auto 10px!important;padding:5px 9px 4px!important;max-width:94vw!important;font-size:6.5px!important;letter-spacing:.15em!important}
  .headline-main{font-size:clamp(34px,9.8vw,44px)!important;line-height:.93!important}
  .headline-bloom{margin-top:8px!important;font-size:clamp(43px,12.2vw,56px)!important;line-height:.76!important}
  .identity{margin-top:22px!important;gap:20px!important;font-size:9px!important;letter-spacing:.32em!important}

  .launch-block{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:min(340px,92vw)!important;max-width:340px!important;margin:14px auto 0!important;padding:11px 10px 9px!important;border-radius:14px!important}
  .countdown{justify-content:center!important;gap:4px!important}
  .count-unit{min-width:42px!important}
  .count-unit strong{font-size:22px!important}
  .count-unit span{margin-top:4px!important;font-size:5.5px!important}
  .count-sep{font-size:18px!important}
  .launch-date{margin-top:7px!important;font-size:7px!important}
  .launch-time{margin-top:5px!important;justify-content:center!important;gap:6px!important;font-size:7px!important;letter-spacing:.08em!important}

  .daily-reveal{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:calc(100% - 32px)!important;max-width:560px!important;margin:18px auto 0!important;padding:12px 14px 10px!important;border-radius:15px!important;transform:none!important;z-index:30!important}
  .daily-ornament{right:14px!important;top:11px!important;font-size:10px!important}
  .daily-day{font-size:9px!important}
  .daily-label{margin-top:4px!important;font-size:6px!important}
  .daily-title{margin-top:7px!important;max-width:92%!important;font-size:13px!important;line-height:1.25!important}
  .daily-symbols{min-height:16px!important;margin-top:6px!important;font-size:13px!important}
  .daily-next{margin-top:7px!important;padding-top:7px!important;font-size:6px!important}
  .daily-next strong{font-size:8px!important}
  .daily-yesterday{margin-top:5px!important;font-size:6px!important}

  .soundtrack{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:calc(100% - 32px)!important;max-width:560px!important;margin:12px auto 0!important;transform:none!important;z-index:30!important}
  .music-player{min-height:72px!important;padding:10px 12px 9px!important;border-radius:15px!important}
  .music-meta{padding-right:108px!important}
  .music-kicker{font-size:6.5px!important}.music-title{font-size:10px!important}.music-status{font-size:6.5px!important}
  .music-controls{right:10px!important;top:10px!important;gap:6px!important}
  .music-btn{width:29px!important;height:29px!important}.music-play{width:34px!important;height:34px!important}
  .music-progress{margin:10px 0 7px!important}.music-foot{font-size:6px!important}

  .footer{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:calc(100% - 32px)!important;margin:24px auto 0!important;padding:0!important;display:flex!important;justify-content:space-between!important;align-items:center!important;font-size:6px!important;letter-spacing:.11em!important;opacity:.72!important;transform:none!important;z-index:30!important}
  .heart-secret{position:fixed!important;top:86px!important}
  .reveal-flash{position:fixed!important}
}
@media (max-width:390px) and (orientation:portrait){
  .hero-reveal,.hero-image{height:335px!important}
  .hero-image{background-size:auto 335px!important}
  .hero-copy{padding-top:326px!important;padding-left:12px!important;padding-right:12px!important}
  .headline-main{font-size:32px!important}.headline-bloom{font-size:42px!important}
  .launch-block{width:94vw!important}
  .daily-reveal,.soundtrack,.footer{width:calc(100% - 24px)!important}
}

/* =====================================================================
   PROJECT 1111 v7.2.1 — MOBILE TYPOGRAPHY + SPACING MICRO-PASS
   Desktop remains untouched.
   ===================================================================== */
@media (max-width:760px) and (orientation:portrait){

  /* Reduce the oversized dark gap below the hero artwork. */
  .hero-copy{
    padding-top:275px!important;
  }

  /* Make the independent-fansite disclaimer comfortably readable. */
  .eyebrow{
    max-width:calc(100vw - 34px)!important;
    padding:7px 12px 6px!important;
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:.10em!important;
    white-space:normal!important;
  }

  /* Give OOM × BAM a stronger editorial identity. */
  .identity{
    margin-top:25px!important;
    gap:16px!important;
    font-family:"Playfair Display",Georgia,serif!important;
    font-size:18px!important;
    font-weight:500!important;
    line-height:1!important;
    letter-spacing:.12em!important;
    color:rgba(255,255,255,.97)!important;
    text-shadow:0 3px 16px rgba(0,0,0,.34)!important;
  }

  .identity span{
    margin:0!important;
    font-family:"DM Sans",Arial,sans-serif!important;
    font-size:10px!important;
    font-weight:500!important;
    letter-spacing:0!important;
    color:#f2a8cd!important;
    opacity:.94!important;
  }

  /* Preserve breathing room before the master countdown. */
  .launch-block{
    margin-top:18px!important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .hero-copy{
    padding-top:255px!important;
  }

  .eyebrow{
    font-size:8.5px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .identity{
    font-size:17px!important;
  }
}


/* =====================================================================
   PROJECT 1111 v7.3 — MASTHEAD + DISCOVERY EASTER EGGS
   ===================================================================== */

/* PENGUIN ♥ SEAL is now treated as the main masthead. */
.top-brand{
  gap:clamp(18px,1.8vw,30px)!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:clamp(12px,1.02vw,17px)!important;
  font-weight:600!important;
  letter-spacing:.38em!important;
}
.top-brand .heart-easter{
  position:relative;
  z-index:31;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  margin:-12px -9px!important;
  padding:0!important;
  color:#f2a8cd!important;
  font-family:Georgia,serif!important;
  font-size:clamp(22px,1.55vw,29px)!important;
  line-height:1!important;
  letter-spacing:0!important;
  filter:drop-shadow(0 0 7px rgba(242,168,205,.55));
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  animation:mastheadHeartbeat 7s ease-in-out infinite;
}
@keyframes mastheadHeartbeat{
  0%,42%,48%,100%{transform:scale(1);filter:drop-shadow(0 0 7px rgba(242,168,205,.48))}
  44%{transform:scale(1.13);filter:drop-shadow(0 0 12px rgba(242,168,205,.82))}
  46%{transform:scale(1.04);filter:drop-shadow(0 0 9px rgba(242,168,205,.64))}
}

/* OOM / × / BAM remain visually editorial; the button chrome is invisible. */
.identity .identity-secret,
.footer-oombam{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-shadow:inherit;
  padding:0;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.identity .identity-secret{
  position:relative;
  z-index:25;
  min-height:44px;
  min-width:44px;
  display:inline-grid;
  place-items:center;
  margin:-12px -8px;
  padding:12px 8px;
}
.identity .pair-x{
  color:#f2a8cd!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:.60em!important;
  font-weight:500!important;
  letter-spacing:0!important;
}

/* Shared secret toast for OOM, BAM, × and OOMBAM. */
.name-secret{
  position:fixed;
  z-index:90;
  left:50%;
  top:15%;
  max-width:min(88vw,420px);
  transform:translate(-50%,-8px);
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(3,7,17,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.96);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.07em;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 12px 36px rgba(0,0,0,.24);
}
.name-secret.is-visible{
  visibility:visible;
  animation:nameSecretToast 2.8s ease both;
}
@keyframes nameSecretToast{
  0%{opacity:0;transform:translate(-50%,-6px)}
  14%,78%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-4px)}
}

.secret-particles{
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  overflow:hidden;
}
.secret-particle{
  position:fixed;
  left:var(--x);
  top:var(--y);
  font-size:var(--size);
  line-height:1;
  opacity:0;
  transform:translate(-50%,-50%) scale(.55) rotate(var(--rot));
  filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
  animation:secretFloat 1.9s ease-out forwards;
}
@keyframes secretFloat{
  0%{opacity:0;transform:translate(-50%,-35%) scale(.55) rotate(var(--rot))}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% - 82px)) scale(1.08) rotate(calc(var(--rot) + 24deg))}
}

/* The Thai-year signature should be readable, not microscopic. */
.thai-year{
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
  color:rgba(255,255,255,.90)!important;
}

/* Footer OOMBAM stays visually identical until someone discovers it. */
.footer-oombam{
  position:relative;
  z-index:25;
  min-height:34px;
  margin:-9px -5px;
  padding:9px 5px;
}

@media (max-width:760px) and (orientation:portrait){
  .top-brand{
    top:max(22px,env(safe-area-inset-top))!important;
    gap:15px!important;
    font-size:13px!important;
    letter-spacing:.29em!important;
  }
  .top-brand .heart-easter{
    width:46px;
    height:46px;
    min-width:46px;
    margin:-13px -10px!important;
    font-size:26px!important;
  }
  .thai-year{
    font-size:13px!important;
    letter-spacing:.16em!important;
  }
  .name-secret{
    top:92px;
    font-size:9px;
    max-width:calc(100vw - 36px);
    padding:9px 13px;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .top-brand{
    gap:11px!important;
    font-size:12px!important;
    letter-spacing:.24em!important;
  }
  .top-brand .heart-easter{
    font-size:25px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .top-brand .heart-easter{animation:none!important}
  .name-secret.is-visible,.secret-particle{animation:none!important}
  .name-secret.is-visible{opacity:1;visibility:visible}
}


/* =====================================================================
   PROJECT 1111 v7.3.1 — EASTER EGG VISIBILITY / MOBILE TAP FIX
   ===================================================================== */

.top-brand .heart-easter{
  position:relative!important;
  color:#ffc1df!important;
  text-shadow:
    0 0 7px rgba(255,193,223,.95),
    0 0 16px rgba(242,168,205,.78),
    0 0 28px rgba(242,168,205,.42)!important;
  filter:drop-shadow(0 0 9px rgba(242,168,205,.92))!important;
}
.top-brand .heart-easter::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,168,205,.30) 0%,rgba(242,168,205,.12) 42%,transparent 72%);
  transform:scale(.82);
  animation:heartAura731 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heartAura731{
  0%,40%,50%,100%{transform:scale(.82);opacity:.62}
  44%{transform:scale(1.28);opacity:1}
  47%{transform:scale(.96);opacity:.78}
}

/* The message is created directly under <body> so no teaser stacking/overflow
   context can hide it on mobile or desktop. */
.secret-toast-731{
  position:fixed!important;
  z-index:2147483000!important;
  left:50%!important;
  top:clamp(86px,14vh,150px)!important;
  width:max-content!important;
  max-width:calc(100vw - 32px)!important;
  transform:translateX(-50%)!important;
  padding:11px 18px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:999px!important;
  background:rgba(4,8,18,.90)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  backdrop-filter:blur(16px)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.42),0 0 22px rgba(242,168,205,.08)!important;
  color:#fff!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.4!important;
  letter-spacing:.035em!important;
  text-align:center!important;
  white-space:normal!important;
  opacity:0;
  pointer-events:none!important;
  animation:secretToast731 3.15s ease both!important;
}
.secret-toast-731.oom{box-shadow:0 14px 44px rgba(0,0,0,.42),0 0 28px rgba(154,223,255,.22)!important}
.secret-toast-731.bam{box-shadow:0 14px 44px rgba(0,0,0,.42),0 0 28px rgba(242,168,205,.24)!important}
.secret-toast-731.pair{box-shadow:0 14px 44px rgba(0,0,0,.42),-12px 0 30px rgba(154,223,255,.12),12px 0 30px rgba(242,168,205,.14)!important}
.secret-toast-731.oombam{
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 14px 48px rgba(0,0,0,.45),-16px 0 34px rgba(154,223,255,.16),16px 0 34px rgba(242,168,205,.18)!important;
}
@keyframes secretToast731{
  0%{opacity:0;transform:translate(-50%,-8px) scale(.96)}
  12%,78%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-5px) scale(.98)}
}

/* Make footer OOMBAM a reliable discovery target without looking like a button. */
.footer-oombam{
  display:inline-grid!important;
  place-items:center!important;
  min-width:70px!important;
  min-height:44px!important;
  margin:-14px -10px!important;
  padding:14px 10px!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

/* Identity targets are similarly forgiving on touch. */
.identity .identity-secret{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

@media (max-width:760px) and (orientation:portrait){
  .secret-toast-731{
    top:88px!important;
    max-width:calc(100vw - 28px)!important;
    padding:10px 14px!important;
    font-size:11px!important;
  }
  .footer-oombam{
    min-width:66px!important;
    min-height:44px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .top-brand .heart-easter::before{animation:none!important;opacity:.8!important;transform:scale(1)!important}
  .secret-toast-731{animation:secretToast731 3.15s ease both!important}
}


/* =====================================================================
   PROJECT 1111 v7.3.2 — GUARANTEED EASTER TEXT + PINK OOM × BAM
   ===================================================================== */

/* Restore the pink identity treatment the user preferred. */
.identity,
.identity .identity-secret,
.identity .pair-x{
  color:#f2a8cd!important;
}
.identity .identity-oom,
.identity .identity-bam{
  color:#f2a8cd!important;
  text-shadow:0 2px 14px rgba(242,168,205,.20)!important;
}

/* Dedicated message layer: not nested in the teaser, cards, or particle stage. */
.easter-message-732{
  position:fixed!important;
  z-index:2147483647!important;
  left:50%!important;
  top:clamp(90px,15vh,160px)!important;
  width:auto!important;
  min-width:220px!important;
  max-width:min(560px,calc(100vw - 28px))!important;
  transform:translate(-50%,-8px)!important;
  box-sizing:border-box!important;
  padding:12px 20px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  background:#0b1020!important;
  background:rgba(7,12,26,.96)!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  font-family:Arial,"DM Sans",sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.45!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  text-transform:none!important;
  white-space:normal!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  box-shadow:0 14px 48px rgba(0,0,0,.52),0 0 28px rgba(242,168,205,.18)!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
.easter-message-732.show{
  visibility:visible!important;
  opacity:1!important;
  transform:translate(-50%,0)!important;
}
.easter-message-732.oom{
  box-shadow:0 14px 48px rgba(0,0,0,.52),0 0 32px rgba(151,218,255,.32)!important;
}
.easter-message-732.bam{
  box-shadow:0 14px 48px rgba(0,0,0,.52),0 0 32px rgba(242,168,205,.34)!important;
}
.easter-message-732.pair,
.easter-message-732.heart,
.easter-message-732.oombam{
  box-shadow:0 14px 48px rgba(0,0,0,.52),-12px 0 30px rgba(151,218,255,.16),12px 0 30px rgba(242,168,205,.22)!important;
}

@media (max-width:760px){
  .easter-message-732{
    top:82px!important;
    min-width:0!important;
    width:calc(100vw - 32px)!important;
    max-width:420px!important;
    padding:11px 14px!important;
    font-size:12px!important;
  }
}


/* PROJECT 1111 v7.3.3 — final identity + heart message refinement */
.identity,
.identity button,
.identity .identity-secret,
.identity .identity-oom,
.identity .identity-bam,
.identity .pair-x{
  color:#f2a8cd!important;
  -webkit-text-fill-color:#f2a8cd!important;
}
.identity .identity-oom,
.identity .identity-bam{
  text-shadow:0 2px 15px rgba(242,168,205,.28)!important;
}

/* Make the heart unmistakably luminous while preserving the elegant masthead. */
#heart-easter{
  color:#ffc1df!important;
  -webkit-text-fill-color:#ffc1df!important;
  text-shadow:
    0 0 6px rgba(255,193,223,1),
    0 0 14px rgba(242,168,205,.90),
    0 0 26px rgba(242,168,205,.62)!important;
}

/* PROJECT 1111 v7.3.4 — repeatable Easter eggs + OOMBAM hit target */
#secret-oom,#secret-bam,#secret-pair,#secret-oombam,#heart-easter{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#secret-oombam{
  position:relative!important;
  z-index:999!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:84px!important;
  min-height:44px!important;
  margin:-14px -12px!important;
  padding:14px 12px!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  cursor:default!important;
}
.site-footer,.site-footer *{pointer-events:auto!important;}
.identity,.identity button,.identity .identity-secret,.identity .identity-oom,.identity .identity-bam,.identity .pair-x{
  color:#f2a8cd!important;
  -webkit-text-fill-color:#f2a8cd!important;
}

/* PROJECT 1111 v7.3.5 — mobile Easter-message placement + heart tap reliability */
@media (max-width:760px) and (orientation:portrait){
  .easter-message-732{
    top:356px!important;
    width:calc(100vw - 56px)!important;
    max-width:520px!important;
    padding:9px 14px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    border-radius:999px!important;
  }
}

/* Heart gets a true 48px touch surface without changing masthead layout. */
#heart-easter{
  position:relative!important;
  z-index:1002!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  display:inline-grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.top-brand{
  position:relative!important;
  z-index:1001!important;
  pointer-events:auto!important;
}

/* PROJECT 1111 v7.3.6 — transparent Easter-egg message */
.easter-message-732{
  background:rgba(7,12,26,.18)!important;
  border-color:rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
  box-shadow:0 5px 24px rgba(0,0,0,.10)!important;
}
.easter-message-732.oom{
  box-shadow:0 5px 24px rgba(0,0,0,.10),0 0 22px rgba(151,218,255,.10)!important;
}
.easter-message-732.bam{
  box-shadow:0 5px 24px rgba(0,0,0,.10),0 0 22px rgba(242,168,205,.11)!important;
}
.easter-message-732.pair,
.easter-message-732.heart,
.easter-message-732.oombam{
  box-shadow:0 5px 24px rgba(0,0,0,.10),-8px 0 22px rgba(151,218,255,.07),8px 0 22px rgba(242,168,205,.08)!important;
}


/* =====================================================================
   PROJECT 1111 v7.4 — RESPONSIVE FLOATING EASTER-EGG REVEALS
   Desktop + tablet landscape + tablet portrait + mobile
   ===================================================================== */

/* The OomBam word in the disclaimer is secretly interactive but visually
   remains part of the sentence. */
.disclaimer-oombam-secret{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  text-transform:inherit!important;
  text-shadow:inherit!important;
  cursor:default!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Kill the notification/pill appearance completely.
   This is now typography that appears to belong to the page itself. */
.easter-message-732{
  position:fixed!important;
  z-index:2147483647!important;
  left:50%!important;
  top:auto!important;
  bottom:18.5vh!important;
  width:auto!important;
  min-width:0!important;
  max-width:min(620px,70vw)!important;
  transform:translate(-50%,8px)!important;
  box-sizing:border-box!important;
  padding:4px 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.98)!important;
  -webkit-text-fill-color:rgba(255,255,255,.98)!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.4!important;
  letter-spacing:.035em!important;
  text-align:center!important;
  white-space:normal!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.82),
    0 0 12px rgba(255,255,255,.16)!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
.easter-message-732.show{
  visibility:visible!important;
  opacity:1!important;
  transform:translate(-50%,0)!important;
}

/* Keep the character-specific atmosphere through text glow only. */
.easter-message-732.oom{
  text-shadow:0 2px 8px rgba(0,0,0,.82),0 0 15px rgba(151,218,255,.48)!important;
}
.easter-message-732.bam{
  text-shadow:0 2px 8px rgba(0,0,0,.82),0 0 15px rgba(242,168,205,.52)!important;
}
.easter-message-732.pair,
.easter-message-732.heart,
.easter-message-732.oombam{
  text-shadow:
    0 2px 8px rgba(0,0,0,.82),
    -4px 0 14px rgba(151,218,255,.28),
    4px 0 14px rgba(242,168,205,.36)!important;
}

/* Desktop: reveal below the identity / above the central countdown zone,
   away from Penguin and Seal. */
@media (min-width:1101px){
  .easter-message-732{
    bottom:18.5vh!important;
    max-width:600px!important;
  }
}

/* Tablet landscape: use the central lower hero area. */
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape){
  .easter-message-732{
    top:auto!important;
    bottom:22vh!important;
    max-width:64vw!important;
    font-size:11.5px!important;
  }
}

/* Tablet portrait: place reveal in the breathing room below artwork and
   before the primary copy/cards. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .easter-message-732{
    top:43vh!important;
    bottom:auto!important;
    width:76vw!important;
    max-width:620px!important;
    font-size:12px!important;
  }
}

/* Mobile portrait: intentionally use the large negative-space band below
   Penguin/Seal and above the disclaimer. */
@media (max-width:760px) and (orientation:portrait){
  .easter-message-732{
    top:315px!important;
    bottom:auto!important;
    width:calc(100vw - 54px)!important;
    max-width:520px!important;
    padding:3px 8px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
  }
}

/* Mobile landscape: closer to tablet-landscape behavior. */
@media (max-width:760px) and (orientation:landscape){
  .easter-message-732{
    top:auto!important;
    bottom:19vh!important;
    width:68vw!important;
    max-width:520px!important;
    font-size:10.5px!important;
  }
}

/* Preserve preferred pink identity. */
.identity,
.identity button,
.identity .identity-secret,
.identity .identity-oom,
.identity .identity-bam,
.identity .pair-x{
  color:#f2a8cd!important;
  -webkit-text-fill-color:#f2a8cd!important;
}


/* =====================================================================
   PROJECT 1111 v7.5 — CLEAN RESPONSIVE EASTER REVEAL SLOT
   Structural fix: no fixed toast positioning, no box, no overlap.
   ===================================================================== */

/* Retire every older fixed toast/message presentation. */
.easter-message-732,
.name-secret,
.secret-toast-731{
  display:none!important;
}

/* The reveal now owns a real place in the layout. It is visually empty
   until an Easter egg is discovered. */
.easter-reveal-slot{
  position:relative!important;
  z-index:40!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(720px,82vw)!important;
  min-height:28px!important;
  margin:0 auto!important;
  padding:2px 12px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.98)!important;
  -webkit-text-fill-color:rgba(255,255,255,.98)!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:.035em!important;
  text-align:center!important;
  text-shadow:0 2px 8px rgba(0,0,0,.78),0 0 13px rgba(255,255,255,.14)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(4px)!important;
  transition:opacity .22s ease,transform .22s ease!important;
  pointer-events:none!important;
}
.easter-reveal-slot.show{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.easter-reveal-slot.oom{
  text-shadow:0 2px 8px rgba(0,0,0,.78),0 0 16px rgba(151,218,255,.52)!important;
}
.easter-reveal-slot.bam{
  text-shadow:0 2px 8px rgba(0,0,0,.78),0 0 16px rgba(242,168,205,.56)!important;
}
.easter-reveal-slot.pair,
.easter-reveal-slot.heart,
.easter-reveal-slot.oombam{
  text-shadow:
    0 2px 8px rgba(0,0,0,.78),
    -4px 0 14px rgba(151,218,255,.30),
    4px 0 14px rgba(242,168,205,.40)!important;
}

/* Desktop + tablet share the same composition.
   Reserve a slim reveal line immediately before the disclaimer, keeping it
   away from OOM × BAM and the countdown. */
@media (min-width:761px){
  .easter-reveal-slot{
    min-height:30px!important;
    margin-bottom:3px!important;
    font-size:11.5px!important;
  }
}

/* Mobile: use the natural negative space beneath the artwork and above the
   disclaimer. A real in-flow slot means it cannot cover the headline. */
@media (max-width:760px) and (orientation:portrait){
  .easter-reveal-slot{
    width:calc(100vw - 46px)!important;
    min-height:32px!important;
    margin-top:0!important;
    margin-bottom:5px!important;
    padding:2px 8px!important;
    font-size:11px!important;
    line-height:1.3!important;
  }
}

/* Mobile landscape follows desktop/tablet but remains compact. */
@media (max-width:760px) and (orientation:landscape){
  .easter-reveal-slot{
    width:68vw!important;
    min-height:26px!important;
    margin-bottom:2px!important;
    font-size:10.5px!important;
  }
}

/* OomBam in the disclaimer: invisible interaction treatment, same typography. */
.disclaimer-oombam-secret{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  text-transform:inherit!important;
  text-shadow:inherit!important;
  cursor:default!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Preserve the preferred pink OOM × BAM. */
.identity,
.identity button,
.identity .identity-secret,
.identity .identity-oom,
.identity .identity-bam,
.identity .pair-x{
  color:#f2a8cd!important;
  -webkit-text-fill-color:#f2a8cd!important;
}


/* Project 1111 v7.5.1 — visible disclaimer OomBam trigger hardening */
.eyebrow .disclaimer-oombam-secret{
  display:inline!important;
  vertical-align:baseline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font:inherit!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  text-shadow:inherit!important;
  cursor:default!important;
}