/* ── Sticker decorations (PNG cut assets) ────────────── */
.sticker-deco {
  position: absolute; pointer-events: none; z-index: 2;
  user-select: none; display: block;
}
/* Stars trail - chapter nav corner */
.sticker-stars-chap {
  width: clamp(90px, 11vw, 140px);
  bottom: 1.2rem; right: 3.5rem;
  opacity: 0.68;
  transform: rotate(-7deg);
}
/* Vine branch - design section top corner */
.sticker-vine-design {
  width: clamp(70px, 9vw, 110px);
  top: 1.4rem; right: 1rem;
  opacity: 0.42;
  transform: rotate(-22deg) scaleX(-1);
}
/* Vine spirals - stats accent */
.sticker-vine-spirals-stats {
  width: 64px;
  bottom: 0.8rem; right: 1.2rem;
  opacity: 0.28;
}
/* Star gold - small accent near headings */
.sticker-star-sm {
  width: 20px;
  opacity: 0.52;
}
/* Stars scatter - about section corner */
.sticker-stars-about {
  width: clamp(80px, 10vw, 120px);
  top: 1rem; right: 0.5rem;
  opacity: 0.55;
  transform: rotate(-12deg);
}
/* Rose flower - Tete's corner had no fairy-layer accent at all */
.sticker-tete-flower {
  width: clamp(90px, 11vw, 130px);
  top: 0.8rem; right: 1rem;
  opacity: 0.6;
  transform: rotate(10deg);
  filter: drop-shadow(2px 5px 9px rgba(92,61,46,0.12));
}
/* Blue butterfly - settled near the growth paragraph, Tete's other bare corner */
.sticker-tete-butterfly {
  width: clamp(56px, 7vw, 80px);
  bottom: 2.4rem; left: 1.2rem;
  opacity: 0.58;
  transform: rotate(-8deg);
}
/* Gold butterfly - the fairy already sits top-right of the contact heading; this is its
   left-side counterpart, in the same gold the mushroom caps beside it already use */
.sticker-contact-butterfly {
  width: clamp(64px, 8vw, 92px);
  top: 4.5rem; left: 2rem;
  opacity: 0.62;
  transform: rotate(6deg);
}
/* Vine thread - a third accent between the two mushrooms, in the fairy layer's sage */
.sticker-contact-vine {
  width: clamp(46px, 6vw, 64px);
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}
/* Fuchsia butterfly - the stars trail was chapter-nav's only accent */
.sticker-chap-butterfly {
  width: clamp(52px, 6vw, 76px);
  bottom: 1.2rem; left: 2.5rem;
  opacity: 0.55;
  transform: rotate(9deg);
}
/* Single leaf - small, quiet, tucked under the stars */
.sticker-chap-leaf {
  width: clamp(34px, 4vw, 48px);
  bottom: 3.6rem; right: 6.5rem;
  opacity: 0.4;
  transform: rotate(-16deg);
}
/* Blush butterfly - stats' vine already carries a pink bud; this is what lands on it */
.sticker-stats-butterfly {
  width: clamp(58px, 7vw, 82px);
  top: 1.4rem; left: 1.4rem;
  opacity: 0.55;
  transform: rotate(-10deg);
}
/* Cream flower - stats' other corner, low and quiet */
.sticker-stats-flower {
  width: clamp(70px, 8vw, 100px);
  bottom: 1.6rem; left: 1.6rem;
  opacity: 0.4;
  transform: rotate(8deg);
}
/* Ink vine border - Tete's line-art counterpart to the painted rose and butterfly */
.sticker-tete-vine {
  width: clamp(44px, 5vw, 64px);
  top: 3.6rem; left: 1rem;
  opacity: 0.38;
}
/* Gold sparkle - the book bouquet already carries lily and vine; one quiet spark beside the spine */
.sticker-cerave-sparkle {
  width: clamp(38px, 4.5vw, 54px);
  top: 1.2rem; right: 1.4rem;
  opacity: 0.5;
  transform: rotate(-8deg);
}
/* Coral butterfly - settled beside the vine, Photoshop's only other accent */
.sticker-design-butterfly {
  width: clamp(56px, 6.5vw, 78px);
  bottom: 2rem; right: 1.4rem;
  opacity: 0.55;
  transform: rotate(-14deg);
}
/* Jade butterfly - SEO had no fairy-layer accent at all */
.sticker-seo-butterfly {
  width: clamp(60px, 7vw, 86px);
  top: 1.2rem; right: 1.2rem;
  opacity: 0.58;
  transform: rotate(8deg);
}
/* Leafy vine - SEO's other bare corner, echoing the hand-drawn vine already growing through it */
.sticker-seo-vine {
  width: clamp(64px, 7.5vw, 92px);
  bottom: 1rem; left: 0.8rem;
  opacity: 0.4;
}
/* Cream butterfly - About already had stars and the hand-drawn flower cluster; this is its third small guest */
.sticker-about-butterfly {
  width: clamp(54px, 6.5vw, 76px);
  bottom: 2.2rem; right: 1.6rem;
  opacity: 0.5;
  transform: rotate(-10deg);
}
/* Flower-sprout - Thomas's requested single-pixel grow-to-bloom clip; About's open top-left corner,
   full opacity since it's a deliberate one-shot moment, not ambient decoration. Plays once when
   scrolled into view (see the IntersectionObserver near the end of body). */
.sticker-about-sprout {
  width: clamp(90px, 10vw, 132px);
  top: 2.5%; left: 1.2rem;
  opacity: 1;
}
/* Lily-pink flower - Contact's quiet third accent, opposite the vine thread */
.sticker-contact-flower {
  width: clamp(56px, 6.5vw, 80px);
  top: 4.2rem; right: 2.2rem;
  opacity: 0.55;
  transform: rotate(-8deg);
}
/* Ink vine garland - Contact's line-art counterpart to Tete's, hanging beside the gold butterfly */
.sticker-contact-garland {
  width: clamp(80px, 9vw, 116px);
  bottom: 0.6rem; right: 2.2rem;
  opacity: 0.4;
}
/* Leaf ornament - inline between about bio and tags */
.leaf-ornament-sep {
  display: flex; justify-content: center;
  margin: 1.2rem 0 1rem; pointer-events: none;
}
.leaf-ornament-sep img { width: 96px; opacity: 0.55; }

/* hide stickers on mobile to avoid layout issues */
@media (max-width: 600px) {
  .sticker-stars-chap, .sticker-vine-design,
  .sticker-vine-spirals-stats, .sticker-stars-about, .book-bloom,
  .sticker-tete-flower, .sticker-tete-butterfly,
  .sticker-contact-butterfly, .sticker-contact-vine,
  .sticker-chap-butterfly, .sticker-chap-leaf,
  .sticker-stats-butterfly, .sticker-stats-flower, .sticker-tete-vine,
  .sticker-cerave-sparkle, .sticker-design-butterfly, .sticker-seo-butterfly,
  .sticker-seo-vine, .sticker-about-butterfly, .sticker-contact-flower,
  .sticker-contact-garland, .sticker-about-sprout { display: none; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hero: text-only now, so it just needs to center in the stack. */
  #hero { flex-direction: column; justify-content: flex-start; }
  .hero-frame-wrap { top: 64px; }
  /* The frame's own top corner florals now occupy roughly the first 100-150px inside the
     card, so the text needs to start clear of them instead of at the old flat 96px. */
  .hero-inner { padding: 13rem 2rem 1.6rem; text-align: center; width: 100%; max-width: none; margin: 0; }
  .hero-text { max-width: none; }
  .hero-cta-row { justify-content: center; }
  .scroll-hint { justify-content: center; display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .tete-grid { gap: 0.7rem; }
  .cerave-grid { gap: 0.8rem; }
  .section-sub { margin-bottom: 1.8rem; }
  .stats-layout { flex-direction: column; gap: 2rem; }
  .quote-block { text-align: center; max-width: 100%; }
  .stats-row { justify-content: center; }
  .seo-showcase { flex-direction: column; gap: 1.4rem; min-height: auto; }
  /* A hairline, not a bar: trading the rail for a top bar is the same mistake rotated. */
  .seo-names { flex: none; border-top: 1px solid rgba(139,99,85,0.18); padding-left: 0; flex-direction: row; flex-wrap: wrap; }
  .seo-name-item { flex: 1 1 0; justify-content: center; text-align: center; padding: 0.9rem 0.6rem; }
  .seo-name-item::before { left: 0; top: -2px; bottom: auto; width: 100%; height: 2px; transform: scaleX(0); }
  .seo-name-item.active::before, .seo-name-item:hover::before { transform: scaleX(1); }
  .seo-name-arrow { display: none; }
  .seo-preview { min-height: 280px; }
  .about-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .stats-row { gap: 2rem; }
  .film-feature img { height: 360px; }
  .contact-inner { padding: 4.5rem 2rem; }
}
@media (max-width: 600px) {
  /* A phone is the only portrait surface that uses the full desktop painting
     turned clockwise. Compact desktop and tablet frames keep the unrotated
     composition and therefore cannot inherit this stretched geometry. */
  .hero-frame-bg {
    position:absolute; left:50%; top:50%;
    width:calc(100svh - 64px); height:100vw;
    max-width:none; max-height:none;
    transform:translate(-50%, -50%) rotate(90deg);
    object-fit:fill;
  }
  /* The headline is the focal point of the portrait frame, not its top floral border. Center
     the mobile hero's content container, then balance its leading and trailing space so the
     painted MYNGA word, rather than the whole CTA stack, lands on the frame's vertical axis. */
  #hero { justify-content: center; }
  .hero-inner { padding: 10rem 2rem 3.5rem; }
  /* At 320px the two primary actions become a vertical stack. Keep the word itself on the
     portrait axis rather than letting that extra CTA height pull the whole text block upward. */
  @media (max-width: 350px) {
    .hero-text { transform: translateY(2.5rem); }
  }
  .section-inner { padding: 2.8rem 1.2rem; }
  .section-sub { margin-bottom: 1.1rem; }
  /* The lockup does not shrink between breakpoints. This nav is FIXED and transparent over the
     hero, so what gives way on a phone is the padding around it, not the mark. */
  /* The centered logo is absolutely positioned, so retain the original 64px mark + 16px
     breathing room as a real header height. Otherwise the menu's 24px hit area becomes the
     header's height and the logo is centered around the wrong vertical axis. */
  #nav { min-height: 80px; padding: 0.5rem 1.4rem; }
  /* The header has one navigational control on a phone, so the MyNga lockup can sit on the
     viewport axis instead of being optically dragged left by the menu control. The hero title is
     already centered through its full-width text box; this keeps both brand moments on one axis. */
  #nav .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  #nav .hamburger { margin-left: auto; }
  .tete-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .cerave-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .tab-btn { padding: 0.7rem 0.9rem; font-size: 0.7rem; }
  .film-feature img { height: 260px; }
  .stats-row { gap: 1.5rem; }
  .stat-num { font-size: 2.2rem; }
  .contact-inner { padding: 3.5rem 1.4rem; }
  /* Retain the same vertical story on a phone. The large desktop side ornaments
     disappear here, so the supplied blooms carry the middle and lower shoulder
     while the original botanical cluster remains the only foot bouquet. */
  .book-closed-wrap {
    --book-bloom-mid:39%;
    --book-bloom-low:55%;
    --book-bloom-foot:1.45rem;
  }
  .book-user-flower-pink { right:calc(50% + 85px); bottom:4rem; width:88px; }
  .book-user-flower-ivory { left:calc(50% + 78px); top:var(--book-bloom-mid); width:82px; }
  .book-user-flower-pink-sprig-a { right:calc(50% + 102px); top:52%; width:42px; }
  .book-user-flower-pink-sprig-b { right:calc(50% + 115px); bottom:28%; width:48px; }
  .book-user-flower-ivory-sprig { left:calc(50% + 102px); top:calc(var(--book-bloom-low) + 5%); width:42px; }
  /* Keep the new base bouquet visible at phone scale: it sits beneath the lower
     cover corners rather than competing with the title or the tap target. */
  .book-bloom-base { bottom:var(--book-bloom-foot); }
  .book-bloom-base-l { right:calc(50% + 38px); width:clamp(104px,31vw,132px); }
  .book-bloom-base-r { left:calc(50% + 48px); width:clamp(72px,22vw,94px); }
  .book-bloom-floral { left:calc(50% + 92px); bottom:calc(var(--book-bloom-foot) - 0.25rem); width:clamp(100px,29vw,116px); }
}

/* currentColor, so a page sets the ink with its own color property and this file */
/* never needs a second copy per background. */
#mynga-breeze{color:inherit}

#mynga-breeze .wing{transform-box:fill-box;transform-origin:12% 92%;animation:fl_mynga-breeze 4s ease-in-out infinite}
@keyframes fl_mynga-breeze{0%,100%{transform:rotate(-2.2deg) scale(.985)}50%{transform:rotate(2.4deg) scale(1.02)}}
#mynga-breeze .lock{transform-box:fill-box;transform-origin:50% 4%;animation:sw_mynga-breeze 6s ease-in-out infinite}
@keyframes sw_mynga-breeze{0%,100%{transform:rotate(-1.3deg) translateX(-.6px)}50%{transform:rotate(1.5deg) translateX(.8px)}}
#mynga-breeze .spk{transform-box:fill-box;transform-origin:center;animation:dr_mynga-breeze 4s ease-in-out infinite}
#mynga-breeze path.spk:nth-of-type(9){animation-delay:0s}
#mynga-breeze path.spk:nth-of-type(10){animation-delay:-0.57s}
#mynga-breeze path.spk:nth-of-type(11){animation-delay:-1.14s}
#mynga-breeze path.spk:nth-of-type(12){animation-delay:-1.71s}
#mynga-breeze path.spk:nth-of-type(13){animation-delay:-2.28s}
#mynga-breeze path.spk:nth-of-type(14){animation-delay:-2.85s}
#mynga-breeze path.spk:nth-of-type(15){animation-delay:-3.42s}
@keyframes dr_mynga-breeze{0%,100%{opacity:.45;transform:translateY(2px) scale(.88)}50%{opacity:1;transform:translateY(-3px) scale(1.08)}}
@media (prefers-reduced-motion: reduce){
  #mynga-breeze *{animation:none!important;transform:none!important;opacity:1!important}
}