/* Muun corporate site — shared stylesheet.
   Extracted verbatim from design/Muun.html (claude design mock) — base reset,
   keyframes, and the scroll-driven [data-reveal] rule are byte-for-byte the
   same as the original bundle's <style> block. Only the font-loading
   strategy changed: the original embedded all 376 per-unicode-range woff2
   subsets of Cormorant Garamond / Shippori Mincho (~11MB); here both
   families load from Google Fonts' CDN via <link> in each page's <head>
   instead (only the 7 (family, style, weight) combinations actually used
   are requested — see each page's <head> for the exact URL). */

*{ box-sizing:border-box; margin:0; padding:0; }
/* Reserves nav-height clearance for ANY scroll-into-view (in-page #anchor
   links, Element.scrollIntoView(), browser find-in-page) so a jump target
   never lands flush under the fixed nav. Nav is ~86px tall; 110px leaves
   a small buffer. Covers e.g. products.html's #luum anchor. */
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{ background:#EFE8DB; font-family:'Cormorant Garamond',serif; -webkit-font-smoothing:antialiased; }
p{ word-break:keep-all; overflow-wrap:break-word; }
a{ color:inherit; text-decoration:none; transition:opacity .7s ease; }
a:hover{ opacity:.5; }

@keyframes settle{ from{ opacity:0; transform:translateY(16px); filter:blur(3px); } to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes reveal{ from{ opacity:0; transform:translateY(24px); filter:blur(3px); } to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes pagein{ from{ opacity:0; filter:blur(2px); } to{ opacity:1; filter:blur(0); } }
@keyframes inkbreath{ 0%{ opacity:.9; transform:scale(1) translate(0,0); } 50%{ opacity:1; transform:scale(1.02) translate(-0.5%,-0.4%); } 100%{ opacity:.9; transform:scale(1) translate(0,0); } }
@keyframes glowpulse{ 0%{ opacity:.6; transform:translateX(-50%) scale(1); } 50%{ opacity:.82; transform:translateX(-50%) scale(1.05); } 100%{ opacity:.6; transform:translateX(-50%) scale(1); } }
@keyframes floaty{ 0%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(7px); opacity:.7; } 100%{ transform:translateY(0); opacity:.35; } }
[data-reveal]{ opacity:0; animation:reveal linear both; animation-timeline:view(); animation-range:entry 4% cover 30%; }

/* Older browsers without animation-timeline support (Firefox <114, Safari
   <17) never trigger [data-reveal]'s scroll-driven keyframe, so it would
   otherwise stay invisible forever. main.no-scroll-timeline forces the
   revealed end-state instead of animating (see nav.js). */
main.no-scroll-timeline [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }

/* ===================== SHARED BACKGROUND · one poster: moonlight into washi ===================== */
.muun-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:radial-gradient(150% 128% at 50% -10%, #FCF8F0 0%, #F5EFE4 38%, #EEE6D8 70%, #E6DDCC 100%); }
.muun-bg .moonlight{ position:absolute; left:50%; top:-24%; width:1360px; height:940px; background:radial-gradient(circle at 50% 50%, rgba(255,253,246,.52), rgba(255,253,246,0) 66%); filter:blur(30px); animation:glowpulse 66s ease-in-out infinite; }
.muun-bg .humidity{ position:absolute; left:-10%; top:38%; width:660px; height:580px; background:radial-gradient(circle at 50% 50%, rgba(140,124,146,.085), rgba(140,124,146,0) 70%); filter:blur(66px); animation:inkbreath 104s ease-in-out infinite; }
.muun-bg .bloom{ position:absolute; right:1%; bottom:2%; width:860px; height:800px; background:radial-gradient(circle at 62% 70%, rgba(72,74,108,.15), rgba(72,74,108,0) 66%); filter:blur(64px); animation:inkbreath 96s ease-in-out infinite; }
.muun-bg .ink{ position:absolute; right:-4%; bottom:-6%; width:min(88vw,1160px); height:min(122vh,1200px); background:url("muun-ink.png") right bottom / contain no-repeat; mix-blend-mode:multiply; opacity:.5; -webkit-mask-image:radial-gradient(118% 116% at 88% 96%, #000 6%, rgba(0,0,0,.82) 30%, rgba(0,0,0,0) 74%); mask-image:radial-gradient(118% 116% at 88% 96%, #000 6%, rgba(0,0,0,.82) 30%, rgba(0,0,0,0) 74%); transform-origin:88% 94%; animation:inkbreath 96s ease-in-out infinite; }
.muun-bg .washi-a{ position:absolute; inset:0; background-image:url("washi-grain.png"); background-size:210px; opacity:.34; mix-blend-mode:multiply; }
.muun-bg .washi-b{ position:absolute; inset:0; background-image:url("washi-grain.png"); background-size:560px; opacity:.16; mix-blend-mode:multiply; }
.muun-bg .vignette{ position:absolute; inset:0; background:radial-gradient(130% 120% at 50% 42%, rgba(0,0,0,0) 62%, rgba(64,58,50,.06) 100%); }

/* ===================== PER-PAGE AIR · same world, different breath ===================== */
.air{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.air-products{ background:rgba(251,247,239,.30); }
.air-charter{ background:radial-gradient(120% 120% at 82% 102%, rgba(56,58,94,.30), rgba(56,58,94,0) 58%), radial-gradient(96% 82% at 22% -4%, rgba(30,32,55,.12), rgba(30,32,55,0) 60%), rgba(46,48,78,.05); }
.air-privacy{ background:rgba(251,247,240,.52); }
.air-terms{ background:rgba(252,249,243,.66); }
.air-contact{ background:rgba(251,247,240,.50); }

/* ===================== NAV =====================
   The mock's nav had no backdrop — fine there, since every section was
   min-height:100vh with content vertically centered, so body text rarely
   sat near the very top of the viewport during scroll. The long-form
   Terms/Privacy body added here scrolls continuously, so paragraphs pass
   directly under the fixed nav throughout — without a backdrop the nav
   and body text overlap and both become unreadable. A soft blur/tint
   (same paper tone as the page, not a hard bar) keeps the nav legible
   without breaking the quiet, chrome-less feel elsewhere. */
.muun-nav{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:34px 52px; background:rgba(239,232,220,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.muun-nav .home-link{ font-family:'Shippori Mincho',serif; font-size:15px; letter-spacing:.24em; color:#33313d; padding-left:.24em; }
.muun-nav .links{ display:flex; gap:36px; font-size:14.5px; letter-spacing:.13em; color:#413f4b; }

/* ===================== LONG-FORM (Terms / Privacy body text) =====================
   The mock's original Terms/Privacy sections were short teaser copy centered
   in a single narrow block. The real v1.0 legal text is much longer, so —
   per review — the intro keeps the mock's centered treatment, and the full
   legal body switches to a left-aligned reading column (still serif/washi/
   letter-spacing language, just legible at length). */
.legal-body{ max-width:640px; margin:0 auto; text-align:left; }
.legal-body h2{ font-family:'Shippori Mincho',serif; font-weight:500; font-size:16px; letter-spacing:.12em; color:#2c2c37; margin:56px 0 18px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-family:'Shippori Mincho',serif; font-weight:500; font-size:14.5px; letter-spacing:.1em; color:#413f4b; margin:32px 0 12px; }
.legal-body p, .legal-body li{ font-family:'Shippori Mincho',serif; font-size:14.5px; line-height:2.15; letter-spacing:.04em; color:#413f4b; margin:0 0 14px; }
.legal-body ul, .legal-body ol{ margin:0 0 14px; padding-left:1.6em; }
.legal-body li{ margin-bottom:8px; }
.legal-body strong{ color:#2c2c37; font-weight:600; }
.legal-body .meta{ font-size:12.5px; letter-spacing:.1em; color:#8a7c92; margin-bottom:36px; }
.legal-body .ph{ border-bottom:1px dotted rgba(138,124,146,.7); padding-bottom:1px; }
.legal-body table{ width:100%; border-collapse:collapse; margin:16px 0 20px; font-size:13px; }
.legal-body th, .legal-body td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(64,58,50,.12); font-family:'Shippori Mincho',serif; }
.legal-body th{ color:#2c2c37; font-weight:500; }
.legal-body td{ color:#413f4b; }
.legal-body .note{ font-size:12.5px; line-height:2; color:#6a6773; background:rgba(255,255,255,.4); border-radius:4px; padding:14px 16px; margin:20px 0 0; }

/* ===================== COMING SOON (Products) ===================== */
.coming-soon{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13.5px; letter-spacing:.08em; color:#8a7c92; margin-top:20px; }
