/* XANMI v7 — brand typography and editorial motion; layered over C+A v6. */
:root {
  --font-brand-latin: "Comfortaa", "Trebuchet MS", sans-serif;
  --font-brand-thai: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif;
  --color-brand-blue:#0066A6; --color-brand-gold:#C9AF49; --color-brand-green:#677B69;
  --color-amazake-lavender:#E4D8EB; --color-amazake-purple:#725C83;
  --color-beauty-lavender:#AA9FCB; --color-beauty-soft-gold:#FDF0B5;
  --color-ui-paper:#FBFAF7; --color-ui-cream:#F8F6F1;
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-reveal-duration:820ms; --motion-image-duration:1100ms; --motion-stagger:100ms;
}
/* Thai is not to receive expanded letter spacing. English gets Comfortaa at high-visibility touchpoints. */
html[lang="th"] body{font-family:var(--font-brand-thai);}
html[lang="th"] .serif, html[lang="th"] .editorial-text h2,
html[lang="th"] .hybrid-hero h2, html[lang="th"] .hybrid-poem h2,
html[lang="th"] .hybrid-origin-copy h2,html[lang="th"] .hybrid-craft h2,
html[lang="th"] .hybrid-beauty h2,html[lang="th"] .inner-head h1,
html[lang="th"] .section-head, html[lang="th"] .narrative-center h2 {
  font-family:var(--font-brand-thai);letter-spacing:normal;
}
html[lang="th"] .desktop-nav, html[lang="th"] .mobile-nav,
html[lang="th"] .hybrid-button,html[lang="th"] .hybrid-textlink,
html[lang="th"] .arrowlink {font-family:var(--font-brand-thai);}
html[lang="en"] body{font-family:var(--font-brand-latin);}
html[lang="en"] .serif, html[lang="en"] .hybrid-hero h1,
html[lang="en"] .hybrid-product-intro h2, html[lang="en"] .hybrid-product-info h3,
html[lang="en"] .inner-head h1, html[lang="en"] .section-head,
html[lang="en"] .contact-cta h2,html[lang="en"] .editorial-text h2,
html[lang="en"] .hybrid-beauty h2,html[lang="en"] .hybrid-craft h2{
  font-family:var(--font-brand-latin);letter-spacing:-.037em;
}
/* Latin product name always uses Comfortaa; not a replacement for the actual XANMI logo artwork. */
.hybrid-hero h1,.hybrid-product-intro h2,.hybrid-product-info h3,
.hybrid-product-sub,.hybrid-overline,.hybrid-kicker,.hybrid-beauty-brand-label {
  font-family:var(--font-brand-latin);
}
.hybrid-beauty-brand-label{font-size:12px;font-weight:700;letter-spacing:.21em;
 color:#76658f;margin:12px 0 6px;line-height:1.8;}
/* Correct Thai rhythm and hero alignment after swapping from Noto/Georgia. */
.hybrid-hero h2{line-height:1.48;font-weight:500;}
.hybrid-hero h1{letter-spacing:-.058em;line-height:1.2;}
.hybrid-poem h2,.hybrid-origin-copy h2,.hybrid-craft h2,.hybrid-beauty h2{line-height:1.62;}
.hybrid-product-info h3{line-height:1.23;}
.hybrid-hero-body,.hybrid-product-info,.editorial-text{overflow-wrap:break-word;}
html[lang="th"] .hybrid-poem h2{font-size:clamp(31px,4.3vw,58px);}
html[lang="th"] .hybrid-origin-copy h2,html[lang="th"] .hybrid-beauty h2{font-size:clamp(31px,3.55vw,53px);}
html[lang="th"] .hybrid-craft h2{font-size:clamp(34px,4.55vw,65px);}
html[lang="th"] .editorial-text h2{font-size:clamp(32px,4vw,57px);}
/* Japanese editorial atmosphere: quiet panels, no new brand colors. */
.hybrid-poem{background:var(--color-ui-paper);}
.hybrid-craft{background:linear-gradient(116deg,#493952 0%,#6d527e 100%);}
.hybrid-hero-stage{background:radial-gradient(ellipse at 60% 34%,#fffdff 0%,#f1eaf5 40%,#ddd0e7 100%);}
.hybrid-button,.hybrid-textlink,.arrowlink{transition:transform 350ms var(--motion-ease),background-color 300ms ease,gap 350ms var(--motion-ease);}
.hybrid-button:hover{transform:translateY(-2px);}
/* A motion-enhanced page adds this class only AFTER IntersectionObserver is ready.
   No JS / blocked JS / reduced motion => text remains fully visible. */
@media(prefers-reduced-motion:no-preference){
  html.js-motion [data-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,23px,0);}
  html.js-motion [data-reveal-image]:not(.is-visible){opacity:.1;transform:translate3d(0,18px,0);}
  html.js-motion [data-reveal]{transition:opacity var(--motion-reveal-duration) var(--motion-ease),transform var(--motion-reveal-duration) var(--motion-ease);}
  html.js-motion [data-reveal-image]{transition:opacity var(--motion-image-duration) var(--motion-ease),transform var(--motion-image-duration) var(--motion-ease);}
  html.js-motion [data-reveal].is-visible,html.js-motion [data-reveal-image].is-visible{opacity:1;transform:none;}
  html.js-motion .hybrid-hero-stage .hybrid-sachet{animation:xanmi-sachet-enter 980ms var(--motion-ease) both;}
  html.js-motion .hybrid-hero-stage .hybrid-fruit{animation:xanmi-fruit-enter 1150ms 160ms var(--motion-ease) both;}
  @keyframes xanmi-sachet-enter{from{opacity:0;transform:translateY(26px) rotate(-7deg) scale(.97)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
  @keyframes xanmi-fruit-enter{from{opacity:0;transform:translate3d(-8px,20px,0)}to{opacity:1;transform:none}}
  .menu-toggle:before,.menu-toggle:after,.menu-toggle span{transition:transform 300ms var(--motion-ease),opacity 180ms ease,top 300ms var(--motion-ease)}
  .menu-toggle[aria-expanded="true"]:before{top:17px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"]:after{top:17px;transform:rotate(-45deg)}
  .menu-toggle[aria-expanded="true"] span{opacity:0}
}
/* Accessibility: prevent any hidden content in reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 html.js-motion [data-reveal], html.js-motion [data-reveal-image]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
 .hybrid-hero-stage .hybrid-sachet,.hybrid-hero-stage .hybrid-fruit{animation:none!important;}
}
@media(max-width:850px){.hybrid-hero h1{font-size:clamp(47px,10vw,78px)}.hybrid-hero h2{font-size:clamp(27px,5vw,42px)} }
@media(max-width:600px){
 .hybrid-hero h1{font-size:clamp(43px,12vw,65px)}
 .hybrid-hero h2{font-size:clamp(25px,6.1vw,34px)}
 html[lang="th"] .hybrid-poem h2{font-size:clamp(27px,7.1vw,36px);line-height:1.75;}
 html[lang="th"] .hybrid-origin-copy h2, html[lang="th"] .hybrid-beauty h2{font-size:clamp(28px,7vw,37px);}
 .hybrid-hero-body{max-width:100%;}
}

/* Mobile navigation opens and closes with a restrained panel transition. */
@media(max-width:770px) and (prefers-reduced-motion:no-preference){
  .mobile-nav{display:block;max-height:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transform:translateY(-6px);padding-top:0;padding-bottom:0;
    transition:max-height 430ms var(--motion-ease),opacity 220ms ease,transform 380ms var(--motion-ease),padding 380ms var(--motion-ease),visibility 380ms;}
  .mobile-nav.open{display:block;max-height:650px;opacity:1;visibility:visible;pointer-events:auto;transform:none;padding-top:20px;padding-bottom:32px;}
}