/* MagicMFD – responsive foundation. One content structure, two layout orientations. */
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  --viewport: 100vh; /* visible inner viewport; dvh on modern browsers */
  --scroll-viewport: var(--viewport); /* stable document track height */
  --bg-device:
    radial-gradient(ellipse 62% 64% at 52% 22%, rgba(240,240,2,.4), transparent 72%),
    linear-gradient(145deg,#77720d 0%,#f0f002 52%,#706a0a 100%);
  --bg-operation:
    radial-gradient(ellipse 52% 58% at 52% 43%,rgba(255,151,133,.42) 0%,rgba(230,64,64,.12) 48%,transparent 78%),
    linear-gradient(125deg,#72233e 0%,#e64040 48%,#8b285c 100%);
  --bg-tool:
    radial-gradient(ellipse 58% 70% at 18% 45%,rgba(202,137,187,.14),transparent 70%),
    linear-gradient(135deg,#35102d 0%,#6b1f59 54%,#260d23 100%);
  --bg-installation:
    radial-gradient(ellipse 60% 72% at 22% 28%,rgba(190,255,236,.3),transparent 72%),
    radial-gradient(ellipse 54% 64% at 82% 76%,rgba(10,68,60,.24),transparent 74%),
    linear-gradient(135deg,#267f70 0%,#3ebd9d 48%,#286f63 100%);
  --bg-purchase:
    radial-gradient(ellipse 68% 72% at 18% 22%,rgba(255,196,112,.32),transparent 70%),
    radial-gradient(ellipse 58% 60% at 86% 78%,rgba(119,34,0,.19),transparent 72%),
    linear-gradient(135deg,#ef761d 0%,#de5a02 52%,#a9400b 100%);
  --section-accent-rgb:230,217,0;
  --glass-bg: rgba(25,27,32,.96);
  --glass-stroke: rgba(223,239,255,.22);
  --glass-radius: clamp(13px,1.6vw,22px);
}
@supports(height:100dvh) { :root { --viewport: 100dvh; } }
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Snap between main pages, but NOT at intermediary device-animation steps.
     The device story is taller than the viewport, allowing free scrolling inside. */
  scroll-snap-type: y proximity;
  scroll-padding-block: 0;
  overflow-x: clip;
}
body { margin: 0; min-width: 0; overflow-x: clip; background: #77720d; color:#f4f7ff; }
a,button,select { -webkit-tap-highlight-color: transparent; }
button,select { font:inherit; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:2px solid #fff;outline-offset:3px; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link { position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;color:#111;padding:.7rem; }
.skip-link:focus { top:1rem; }

/* Shared, non-scaling site controls. Controls may compress but never force wider-than-screen layout. */
.site-header {
  position:fixed; z-index:40; inset:0 0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(7px,1.5vw,24px);
  padding: max(10px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));
  pointer-events:none;
}
.floral-frame, .glass-card {
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--glass-stroke);
  border-radius:var(--glass-radius);
  background:var(--glass-bg);
}
.floral-frame::before, .glass-card::before {
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:url("../assets/textures/box_background.png") center / 1100px auto no-repeat;
  filter:brightness(0) saturate(100%) invert(40%);
  opacity:.15;
}
.nav-frame { width:min(64vw,930px);min-width:0;flex:0 1 auto;padding:clamp(4px,.48vw,8px);pointer-events:auto; }
.nav-scroller { display:flex;gap:clamp(3px,.45vw,8px); min-width:0; width:100%; overflow-x:auto;scrollbar-width:none; }
.nav-scroller::-webkit-scrollbar { display:none; }
.nav-link {
  display:grid;place-items:center;flex:1 0 auto;
  min-height:clamp(34px,4.7vw,52px);
  min-width:0;padding:6px clamp(7px,1vw,17px);
  border:1px solid rgba(255,255,255,.16);border-radius:clamp(7px,.9vw,11px);
  background:rgba(57,60,65,.57);
  color:#eef3fa;opacity:.8;text-decoration:none;white-space:nowrap;
  font-size:clamp(11px,1.03vw,19px);font-weight:700;line-height:1.1;
  transition:opacity .2s,border-color .2s,background .2s;
}
.nav-link:hover,.nav-link:focus-visible{opacity:1}
/* Same highlight effect as the original red state; only the theme hue changes. */
.nav-link[href="#device"]       { --nav-active-rgb: 230,217,0; }
.nav-link[href="#operation"]    { --nav-active-rgb: 191,8,8; }
.nav-link[href="#tool"]         { --nav-active-rgb: 146,45,165; }
.nav-link[href="#installation"] { --nav-active-rgb: 30,167,125; }
.nav-link[href="#purchase"]     { --nav-active-rgb: 235,110,18; }
.nav-link.is-active {
  opacity:1;
  border-color:rgba(var(--nav-active-rgb),.72);
  background:linear-gradient(115deg,rgba(var(--nav-active-rgb),.38),rgba(var(--nav-active-rgb),.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.language-frame { width:min(27vw,330px);flex:0 0 auto;padding:clamp(4px,.48vw,8px);pointer-events:auto; }
.language-options { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(2px,.4vw,7px); }
.language-option { min-width:0;min-height:clamp(34px,4.7vw,52px);border:1px solid transparent;border-radius:clamp(7px,.9vw,11px);background:none;opacity:.68;display:grid;place-items:center;cursor:pointer; }
.language-option svg { width:min(75%,42px);aspect-ratio:3/2;max-height:30px;display:block;box-shadow:0 1px 3px rgba(0,0,0,.32);border-radius:2px; }
.language-option.is-selected {
  border-color:rgba(var(--section-accent-rgb),.72);
  background:linear-gradient(115deg,rgba(var(--section-accent-rgb),.38),rgba(var(--section-accent-rgb),.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:1;
}
.language-option:hover { opacity:1; }
/* Small screens: current flag only, with an accessible popover selector. */
.compact-language { display:none; position:relative; }
.compact-language-trigger {
  border:1px solid rgba(var(--section-accent-rgb),.72); border-radius:8px;
  background:linear-gradient(115deg,rgba(var(--section-accent-rgb),.38),rgba(var(--section-accent-rgb),.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  color:#fff;
  width:100%; min-height:38px; padding:5px 4px;
  display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.compact-current-flag { display:flex;align-items:center;justify-content:center;min-width:0; }
.compact-current-flag svg { width:27px;height:18px;border-radius:2px;display:block; }
.compact-chevron { width:10px;height:10px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.compact-language-menu {
  position:absolute;right:0;top:calc(100% + 10px);z-index:50;
  width:126px;max-width:calc(100vw - 20px);padding:5px;
  border:1px solid var(--glass-stroke);border-radius:12px;
  background:#1a1d25;box-shadow:0 10px 30px #0009;
}
.compact-language-menu[hidden] { display:none !important; }
.compact-menu-item {
  width:100%;border:1px solid transparent;border-radius:7px;background:transparent;
  display:flex;align-items:center;gap:12px;padding:7px 8px;color:#f4f7ff;
  font-size:13px;font-weight:700;cursor:pointer;text-align:left;
}
.compact-menu-item svg { width:27px;height:18px;display:block;flex-shrink:0;border-radius:2px; }
.compact-menu-item:hover,.compact-menu-item:focus-visible,.compact-menu-item.is-selected { background:rgba(var(--section-accent-rgb),.28);border-color:rgba(var(--section-accent-rgb),.62); }


/* Four viewports of continuous, unsnapped device motion. The frame stays sticky
   while scroll position directly drives both the model and cross-fading copy. */
.device-story {
  position:relative;
  height:calc(4 * var(--scroll-viewport));
  scroll-snap-align:start;
  background:var(--bg-device);
}
.story-frame {
  position:sticky;top:0;z-index:2;
  height:var(--viewport);width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  padding:clamp(66px,calc(var(--viewport) * .095),112px) max(15px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px));
  overflow:clip; /* Only the real screen edge may clip WebGL. */
}
.story-copy { z-index:1; position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding-inline:clamp(3px,2.1vw,32px); }
.story-panel-stack { position:relative;width:100%;height:100%;min-width:0;min-height:0; }
.story-panel {
  position:absolute;top:50%;left:50%;width:min(100%,690px);max-height:calc(100% - 32px);
  display:flex;flex-direction:column;gap:clamp(7px,1vw,16px);
  opacity:var(--panel-alpha,0);visibility:hidden;pointer-events:none;
  transform:translate(-50%,calc(-50% + var(--panel-offset,8px)));
  /* No time-based easing: scrubbing back and forth always follows the scroll. */
}
.story-panel.is-visible { visibility:visible; }
.title-card,.body-card { flex:0 1 auto;min-width:0;max-width:100%;padding:clamp(12px,1.7vw,32px); }
.title-card { flex-shrink:0; }
.body-card { min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.title-card h1 { margin:0; font-size:clamp(22px,3.45vw,66px);letter-spacing:-.05em;line-height:1.07;font-weight:770;text-wrap:balance; }
.body-card p { margin:0;color:#e1e9f6;font-size:clamp(13px,1.49vw,27px);font-weight:430;line-height:1.47; }
.body-card p + p { margin-top:clamp(8px,1.2vh,16px); }
.body-card strong { color:#fff;font-weight:730; }
.body-card .welcome-cue { color:#fff;font-weight:730;margin-top:clamp(12px,1.8vh,23px);font-size:clamp(14px,1.75vw,31px); }
/* Continuous progress line instead of clickable discrete story steps. */
.story-progress { position:absolute;top:0;left:50%;transform:translate(-50%,var(--progress-top,0px));width:clamp(100px,28%,210px);height:3px;border-radius:100px;background:rgba(255,255,255,.25);overflow:hidden; }
.story-progress-fill { height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(var(--story-progress,0));will-change:transform; }
/* A single transparent WebGL surface spans the ENTIRE visible story.
   Its virtual camera places the product in the free area beside/below the copy.
   Parts are never clipped by an artificial right-column canvas rectangle. */
.story-model { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible; }

/* No canvas masks: case parts fade by material opacity while moving away. */
#device-canvas {
  position:absolute;inset:0;display:block;width:100%;height:100%;
  touch-action:pan-y;pointer-events:none;
  opacity:0;transition:opacity .38s ease;
}
#device-canvas.is-ready { opacity:1; }
.intro-title-line { display:block; white-space:nowrap; }
/* Non-intro titles retain their original desktop single-line flow if they fit. */
.title-line:not(.intro-title-line) + .title-line::before { content:" "; }
.color-page { position:relative;min-height:var(--viewport);scroll-snap-align:start; }
.color-page--operation { background:var(--bg-operation); }
.color-page--tool { background:var(--bg-tool); }
.color-page--installation { background:var(--bg-installation); }
.color-page--purchase { background:var(--bg-purchase); }

/* Compact landscape screens keep left/right, but sizes are constrained by BOTH axes. */
@media (orientation:landscape) and (max-height:560px) {
  .site-header { padding-top:max(7px,env(safe-area-inset-top,0px)); }
  .nav-link,.language-option{min-height:clamp(28px,8vh,42px);font-size:clamp(10px,1.3vw,13px);}
  .story-frame { padding-top:max(55px,calc(env(safe-area-inset-top,0px) + 47px));padding-bottom:max(7px,env(safe-area-inset-bottom,0px)); }
  .story-copy { padding-inline:clamp(0px,1.4vw,12px); }
  .story-panel { max-height:calc(100% - 24px);gap:6px; }
  .title-card,.body-card { padding:clamp(8px,1.2vw,14px);border-radius:12px; }
  .title-card h1 { font-size:clamp(18px,2.8vw,30px); }
  .body-card p { font-size:clamp(11px,1.35vw,14px);line-height:1.34; }
  .body-card p+p { margin-top:6px; }
  .body-card .welcome-cue { font-size:clamp(12px,1.6vw,16px);margin-top:8px; }
  .story-progress { bottom:auto; }
}
/* On portrait screens, the copy goes above the same GLB, not beside it. */
/* Phone portrait: copy takes only the height it actually needs. The rest
   goes to the 3D scene. No fixed 52/48 split leaving wasted yellow space.
   --portrait-copy-height is measured from the currently visible story panel. */
@media (orientation:portrait) {
  .site-header { gap:8px;padding: max(9px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px)); }
  .nav-frame { width:auto; flex:1 1 auto; }
  .nav-scroller { scroll-snap-type:x proximity; }
  .nav-link { min-height:37px;font-size:12px;padding:6px 12px;scroll-snap-align:start; }
  .language-frame { width:58px;min-height:48px;flex:0 0 58px;overflow:visible;isolation:auto; }
  .language-options { display:none; }
  .compact-language { display:block; }
  .compact-language-trigger { height:38px; }
  .story-frame {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,var(--portrait-copy-height,290px)) minmax(0,1fr);
    padding-top:calc(max(9px,env(safe-area-inset-top,0px)) + 65px);
    padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
    padding-inline:max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  }
  .story-copy { width:100%;height:100%; }
  .story-copy { padding-inline:0;align-items:start; }
  .story-panel {
    top:clamp(12px,calc(var(--viewport) * .022),24px);
    width:min(100%,640px);
    max-height:calc(var(--viewport) - 300px);
    gap:9px;
    transform:translate(-50%,var(--panel-offset,0px));
  }
  .title-card,.body-card { padding:clamp(13px,3.4vw,28px);border-radius:clamp(13px,3.2vw,22px); }
  /* All three headings use intentional two-line wrapping, not just Welcome. */
  .title-card h1 { font-size:var(--title-fit-size,clamp(29px,8.7vw,49px));line-height:1.07; }
  .title-line { display:block;white-space:nowrap; }
  .title-line:not(.intro-title-line) + .title-line::before { content:none; }
  .body-card p { font-size:clamp(14px,3.65vw,19px);line-height:1.44; }
  .body-card p+p { margin-top:clamp(8px,1vh,12px); }
  .body-card .welcome-cue { font-size:clamp(15px,3.85vw,20px); }
  .story-model { min-height:0;transform:none; }
  .story-progress { bottom:auto; }
}
/* Short portrait viewports need room for the scene, not enormous type. */
@media (orientation:portrait) and (max-height:690px) {
  .story-frame { padding-top:66px; }
  .story-panel { top:8px;max-height:calc(var(--viewport) - 245px);gap:7px; }
  .title-card,.body-card { padding:10px 12px; }
  .title-card h1 { font-size:var(--title-fit-size,clamp(26px,7.7vw,38px)); }
  .body-card p { font-size:clamp(12px,3.5vw,16px);line-height:1.37; }
}
@media (max-width:700px) and (orientation:landscape) {
  .language-options { display:none; }
  .compact-language{ display:block; }
  .language-frame { width:57px;overflow:visible;isolation:auto; }
  .compact-language-trigger { min-height:31px;height:31px; }
  .nav-frame { width:auto;flex:1 1 0; }
  .nav-link { padding:5px 10px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  /* The scroll-driven animation never has a separate timed transition. */
}

/* V13: the visible scene follows Safari's collapsing toolbar using dvh.
   Scrolling sections retain a stable lvh-sized DOCUMENT track. This prevents
   dynamic toolbar height from moving section starts and changing scrollY.
   Device WebGL and copy use --viewport; Operation's inner stage does too. */
@media (pointer:coarse), (hover:none) {
  :root { --scroll-viewport:100vh; }
  @supports (height:100lvh) { :root { --scroll-viewport:100lvh; } }
  html { scroll-snap-type:none !important; scroll-behavior:auto; overflow-anchor:none; }
  .device-story { height:calc(4 * var(--scroll-viewport)); scroll-snap-align:none !important; }
  .story-frame { height:var(--viewport); overflow-anchor:none; }
  .color-page { min-height:var(--scroll-viewport); scroll-snap-align:none !important; }
  #operation { height:var(--scroll-viewport); min-height:var(--scroll-viewport); }
  #operation .operation-layout { height:var(--viewport); overflow-anchor:none; }
}
/* Mobile scroll alignment is deliberately NOT native scroll-snap: a light,
   direction-aware adjustment after a completed gesture cannot pull backwards. */

/* V15: repeated taps on mobile navigation/language controls must not
   activate Safari double-tap zoom. Keep intentional pinch zoom enabled. */
.site-header button, .site-header .nav-link { touch-action:manipulation; }

/* V25: iOS Safari collapsed browser toolbar can sample the root/body
   background rather than relying only on the theme-color meta tag. */
:root { --browser-bar-color:#aaa900; background-color:var(--browser-bar-color); }
body { background-color:var(--browser-bar-color); }