/* The opening uses a single continuous veil and one light direction.
   Photography and video unfold from their shared seam, once on arrival. */
.cinematic-home .cinema-nav{
  --p:0;--nav-logo-width:193.6px;--nav-gutter:clamp(20px,4vw,64px);
  position:fixed;gap:26px;min-height:0;
  padding:calc(18px - 6px * var(--p)) var(--nav-gutter);
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(243,239,231,calc(.14 * var(--p)));transition:color .6s ease;
}
/* The glass belongs behind the navigation, with a clear aperture exactly
   under the gem. Facet alpha can then pick up the page, not darkened glass.
   The mask uses the logo's viewBox, so V2 sizing and responsive sizing align. */
.cinematic-home .cinema-nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,14,12,calc(.66 * var(--p))),rgba(13,14,12,calc(.52 * var(--p))));
  backdrop-filter:blur(calc(20px * var(--p))) saturate(calc(1 + .3 * var(--p)));
  -webkit-backdrop-filter:blur(calc(20px * var(--p))) saturate(calc(1 + .3 * var(--p)));
  -webkit-mask-image:linear-gradient(#fff 0 0),url('/brand/allodia-symbol-aperture.svg');
  -webkit-mask-size:100% 100%,var(--nav-logo-width) auto;
  -webkit-mask-position:0 0,var(--nav-gutter) 50%;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:xor;
  mask-image:linear-gradient(#fff 0 0),url('/brand/allodia-symbol-aperture.svg');
  mask-size:100% 100%,var(--nav-logo-width) auto;
  mask-position:0 0,var(--nav-gutter) 50%;
  mask-repeat:no-repeat;
  mask-composite:exclude;
}
.logo-optics{position:absolute;pointer-events:none;overflow:hidden}
.cinematic-home .cinema-nav .cinema-brand{width:var(--nav-logo-width);position:relative}
/* Only the view through the gem is softened and gently refracted. Its SVG
   facets and the wordmark paint above this lens, keeping their edges sharp.
   Plain frosting is the fallback when SVG backdrop filters aren't supported. */
.cinematic-home .cinema-nav .cinema-brand::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url('/brand/allodia-symbol-aperture.svg') center / 100% 100% no-repeat;
  mask:url('/brand/allodia-symbol-aperture.svg') center / 100% 100% no-repeat;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
@supports(backdrop-filter:url('#allodia-facet-refraction')){
  .cinematic-home .cinema-nav .cinema-brand::before{
    backdrop-filter:blur(3px) url('#allodia-facet-refraction');
  }
}
.cinematic-home .cinema-nav .cinema-brand img{position:relative}
.cinematic-home .cinema-nav nav{gap:30px;margin-right:12px;font-size:16px;font-weight:400;text-shadow:0 1px 8px #0009}
.cinematic-home .nav-quote{white-space:nowrap}
/* The opening owns its approved split; demo-viewer styling must not supply it. */
.cinema-hero{--hero-gutter:clamp(20px,4vw,64px);--split:64%;--viewport-tail:0px;position:relative;isolation:isolate;height:100svh;min-height:620px;overflow:clip;background:#0d0e0c;color:#f3efe7}
/* Native sticky keeps the lettering in the compositor's scroll position,
   rather than cancelling each scroll event with a later JavaScript transform. */
.opening-foreground{--viewport-tail:0px;position:sticky;top:0;height:100svh;min-height:inherit;z-index:1}
.opening-scenes,.opening-shade,.opening-scene-layer{position:absolute;inset:0;pointer-events:none}
.opening-scenes{user-select:none;-webkit-user-select:none;z-index:-3;transform-origin:50% 30%;will-change:transform}
.opening-scene-layer{display:grid;grid-template-columns:var(--paired-split,var(--split)) minmax(0,1fr);gap:2px;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1),grid-template-columns .42s cubic-bezier(.22,.75,.22,1),gap .28s ease}
.opening-scene-layer.is-current{opacity:1}
.opening-scene-layer figure{position:relative;min-width:0;overflow:hidden;margin:0;background:#0d0e0c}
.cinema-hero:is([data-media-composition=photo],[data-media-composition=video]) .opening-scene-layer{gap:0}
.cinema-hero[data-media-composition=photo] .opening-video,.cinema-hero[data-media-composition=video] .opening-photograph{opacity:0;pointer-events:none}
.opening-scene-layer img,.opening-scene-layer video{-webkit-user-drag:none;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.opening-photograph img{position:absolute;inset:0;object-position:50% 31%}
.opening-photo-swap{opacity:0;transition:opacity .6s ease}
.opening-photo-swap.is-shown{opacity:1}
.is-opening .opening-photograph{opacity:0;transform:scale(1.06);clip-path:inset(0 0 0 100%);animation:opening-unfold-left 2.2s cubic-bezier(.16,1,.3,1) .1s forwards}
.is-opening .opening-video{opacity:0;transform:scale(1.06);clip-path:inset(0 100% 0 0);animation:opening-unfold-right 2.2s cubic-bezier(.16,1,.3,1) .35s forwards}
@keyframes opening-unfold-left{to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes opening-unfold-right{to{opacity:1;transform:none;clip-path:inset(0)}}
[data-rotation=paused] .is-opening figure{animation-play-state:paused}
.opening-shade{z-index:-2;will-change:opacity;background:linear-gradient(180deg,rgba(8,9,8,.55) 0%,transparent 22%),linear-gradient(0deg,rgba(8,9,8,.82) 0%,rgba(8,9,8,.38) 34%,transparent 60%),radial-gradient(90% 80% at 12% 74%,rgba(8,9,8,.70),transparent 62%)}
.opening-copy{position:absolute;left:var(--hero-gutter);right:var(--hero-gutter);bottom:calc(var(--viewport-tail) + clamp(88px,13vh,150px));z-index:3;will-change:opacity}
.opening-copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,10.4vw,176px);font-variation-settings:"opsz" 144;letter-spacing:-.035em;line-height:.9;text-shadow:0 2px 40px #00000059}
.opening-copy h1 span{display:block;color:#f3efe7}
.opening-copy h1 .opening-ownership{white-space:nowrap}
.opening-copy h1 em{color:var(--lime)}
/* These display lines intentionally overlap their font-metric selection boxes.
   Colour the selected glyphs, without painting an opaque box over the next line. */
.opening-copy h1::selection,.opening-copy h1 *::selection{background:transparent;color:var(--lime);text-shadow:none}
.opening-copy h1 em{font-weight:300;letter-spacing:-.03em}
.opening-lede{max-width:34ch;margin-top:30px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:rgba(243,239,231,.82);text-shadow:0 2px 40px #00000059;text-wrap:pretty}
.opening-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;width:fit-content;pointer-events:auto}
.opening-actions .button{border-radius:3px;min-height:52px;padding:15px 22px;gap:20px;font-size:13px;white-space:nowrap}
.button-glass{color:#f3efe7;border:1px solid #f3efe77a;background:#ffffff08;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.button-glass:hover{background:#f3efe728;border-color:#f3efe7c9;box-shadow:inset 0 0 0 1px #ffffff13}
.button-glass:active{background:#0d0e0c66;box-shadow:inset 0 2px 10px #00000055}
/* One glass dock: source labels sit directly above the controls they describe. */
.opening-tools{position:absolute;bottom:calc(var(--viewport-tail) + 48px);left:0;right:0;display:flex;justify-content:center;will-change:opacity;pointer-events:none;z-index:4}
.opening-control-cluster{position:relative;display:flex;align-items:center;flex-direction:column;pointer-events:auto}
.opening-feature{margin:0 0 10px;font-size:14px;font-weight:500;line-height:1.4;color:var(--lime);text-shadow:0 1px 8px #0009}
.opening-feature:hover{text-decoration:underline;text-underline-offset:4px}
.opening-shop{display:flex;justify-content:center;align-items:baseline;margin:2px 0 0;font-size:14px;line-height:20px;color:#f3efe7;text-align:center;text-shadow:0 1px 8px #0009}
.opening-shop>[data-hero-shop]{font-weight:500}
.opening-shop>[data-hero-category]::before{content:'·';margin-inline:8px;opacity:.65}
.opening-media-control{display:flex;align-items:stretch;gap:14px;padding:11px 13px 12px;border:1px solid #f3efe747;border-radius:8px;background:#131b1c40;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff14}
.opening-photo-control,.opening-video-control{display:flex;align-items:center;flex-direction:column;gap:9px}
.opening-video-control{border-left:1px solid #f3efe733;padding-left:14px;min-width:78px}
.opening-control-label{font-size:11px;line-height:1.2;letter-spacing:.025em;color:#f3efe7;white-space:nowrap}
.opening-thumbs{display:flex;gap:7px}
.opening-thumbs button{height:46px;width:46px;padding:0;background:none;border:1px solid #ffffff50;border-radius:3px;overflow:hidden;opacity:.7;transition:opacity .25s,border-color .25s,box-shadow .25s}
.opening-thumbs img{width:100%;height:100%;object-fit:cover}
.opening-thumbs button:hover{opacity:1;border-color:#fff}
.opening-thumbs button[aria-pressed=true]{opacity:1;border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.opening-thumbs button:focus-visible{outline-color:var(--lime);outline-offset:4px}
.opening-video-control .film-toggle{width:46px;height:46px;padding:0;display:grid;place-items:center;background:#ffffff0c;border-color:#ffffff70;backdrop-filter:none}
.opening-video-control .film-toggle:hover{background:#ffffff28}
.opening-media-control.paired-media-control .opening-video-control{min-width:0}
.opening-scene-picker{display:flex;gap:0;align-items:center;margin-top:5px}
.opening-scene-picker button{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:#f3efe7;border:0;border-radius:3px;transition:background .25s}
.opening-scene-picker button:hover{background:#ffffff1c}
.opening-scene-picker button:focus-visible{outline-color:var(--lime)}
.opening-scene-dot{width:11px;height:11px;border-radius:50%;border:1px solid #f3efe7bf;background:#f3efe738;transition:background .3s,box-shadow .3s}
.opening-scene-picker [aria-pressed=true] .opening-scene-dot{background:#f3efe7;box-shadow:0 0 0 3px #f3efe729}
.opening-scene-arrow span{font-size:24px;line-height:1}
.opening-bottom{position:absolute;left:var(--hero-gutter);right:var(--hero-gutter);bottom:calc(var(--viewport-tail) + 26px);display:flex;justify-content:space-between;align-items:center;gap:22px;color:#f3efe7dc;will-change:opacity}
.opening-discover{display:flex;align-items:center;gap:28px;white-space:nowrap;font-size:11px;min-height:32px}
.opening-discover span{font-size:24px;line-height:1}
.opening-discover:hover{color:var(--lime)}
.opening-caption{margin:0;max-width:50%;font-size:13px;line-height:1.65;text-align:right;color:#f3efe7;text-shadow:0 1px 8px #00000099}
@media(min-width:761px){
  .cinema-hero{height:max(100svh,67.1vw)}
  .opening-shade{background:linear-gradient(180deg,rgba(8,9,8,.55) 0,transparent 22svh,transparent 40svh,rgba(8,9,8,.38) 66svh,rgba(8,9,8,.82) 100svh,rgba(8,9,8,.82) 100%),radial-gradient(90% 80svh at 12% 74svh,rgba(8,9,8,.70),transparent 62%)}
}
@media(min-width:1600px){.opening-actions .button{font-size:14px;min-height:56px}.opening-caption{font-size:14px}}
@media(min-width:761px) and (max-width:1200px){
  .cinematic-home .cinema-nav{--nav-logo-width:170.5px;gap:18px}.cinematic-home .cinema-nav nav{gap:18px;margin-right:0;font-size:14px}.cinematic-home .cinema-brand{width:170.5px}.cinematic-home .nav-quote{padding-inline:15px;font-size:12px}
  .opening-copy{bottom:calc(var(--viewport-tail) + 290px)}
  .opening-copy h1{font-size:10vw}
  .opening-lede{margin-top:23px;max-width:36ch;font-size:17px}
  .opening-actions{margin-top:24px}.opening-actions .button{padding-inline:17px;font-size:12px}
  .opening-tools{bottom:calc(var(--viewport-tail) + 68px)}
  .opening-caption{font-size:12px}
}
@media(min-width:761px) and (max-width:1200px) and (max-height:700px){
  .opening-copy h1{font-size:clamp(56px,8vw,72px)}
  .opening-lede{font-size:15px;max-width:40ch;margin-top:18px}
  .opening-actions{margin-top:20px}.opening-actions .button{min-height:48px;padding-block:12px}
}
@media(max-width:760px){
  .cinematic-home .cinema-nav{--nav-logo-width:166.1px;--nav-gutter:24px;padding:calc(17px - 5px * var(--p)) var(--nav-gutter);gap:16px}
  .cinematic-home .cinema-brand{width:166.1px}.cinematic-home .nav-quote{display:none}.cinematic-home .menu-toggle{margin-left:auto;width:44px;height:44px}
  .cinematic-home .cinema-nav nav{font-size:19px;gap:12px}
  .cinema-hero{--hero-gutter:24px;--split:50%;min-height:800px;height:100svh}
  .opening-copy{bottom:300px}
  .opening-copy h1{font-size:clamp(54px,13vw,96px);line-height:.95}
  .opening-lede{margin-top:24px;font-size:16px;max-width:34ch;line-height:1.5}
  .opening-lede{color:#f3efe7;text-shadow:0 1px 6px #000c}
  .opening-actions{gap:10px;margin-top:26px;flex-wrap:nowrap}
  .opening-actions .button{font-size:11px;min-height:48px;padding:13px 12px;gap:0}
  .opening-actions .button>span{display:none}
  .cinematic-home .opening-actions{flex-direction:row;flex-wrap:nowrap}
  .cinematic-home .opening-actions .allodia-action{font-size:13px;min-height:48px;padding:12px 14px;flex:1 1 auto;white-space:nowrap}
  .opening-tools{bottom:78px}
  .opening-control-cluster{width:min(430px,calc(100vw - 20px))}
  .opening-bottom{bottom:20px;gap:16px}
  .opening-caption{max-width:60%;font-size:11px}
  .opening-discover{font-size:11px;gap:8px;min-height:28px}
}
@media(max-width:380px){
  .cinema-hero{--hero-gutter:20px;min-height:825px}
  .opening-actions{flex-direction:column;width:100%;gap:10px}
  .opening-actions .button{width:100%;font-size:12px}
  .opening-copy h1{font-size:53px}
  .cinematic-home .opening-actions .allodia-action{font-size:12px;padding-inline:10px}
  .cinematic-home .opening-actions .allodia-action>span{display:none}
  .opening-lede{font-size:15px}
  .opening-caption{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .opening-foreground{position:relative}
  .opening-scene-layer,.opening-photo-swap{transition:none}
  .is-opening .opening-photograph,.is-opening .opening-video{opacity:1;transform:none;clip-path:none;animation:none}
  .opening-scenes,.opening-copy,.opening-shade,.opening-tools,.opening-bottom{will-change:auto}
}
.cinema-hero[data-window-fullscreen=true]{position:fixed;inset:0;z-index:1000;width:100vw;height:100dvh;min-height:0}
.cinema-hero:fullscreen,.cinema-hero:-webkit-full-screen{width:100vw;height:100dvh;min-height:0}
/* Pale paper and wood need a little more shade behind the shared light headline. */
.opening-shade::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080c09a6,#080c0966 42%,transparent 72%);opacity:0;transition:opacity 1.8s ease}
[data-scene=paper] .opening-shade::after,[data-scene=toys] .opening-shade::after{opacity:1}
/* Align the detail's paper edge with "store" and let it slope beneath "own".
   The other photograph and video keep their independently chosen crops. */
.opening-scene-layer[data-scene=paper] .opening-photograph img{
  transform-origin:0 0;transform:none;
  object-position:0 0;filter:brightness(1.04) contrast(1.06);
}
.opening-scene-layer[data-scene=paper] .opening-photograph img[data-hero-photo="0"]{
  width:var(--paper-detail-width,100%);height:var(--paper-detail-height,100%);max-width:none;
  left:var(--paper-detail-left,0px);
  top:var(--paper-detail-top,0px);
  /* The supplied replacement already includes the owner's color treatment. */
  filter:none;
}
.opening-scene-layer[data-scene=paper] .opening-photograph img[data-hero-photo="1"]{
  object-position:0 0;transform:translateY(-22%) scale(1.55);
  filter:brightness(1.12);
}
.opening-scene-layer[data-scene=paper] .opening-video video{
  transform-origin:50% 0;transform:translateY(-18%) scale(1.22);
  filter:brightness(1.14);
}
[data-scene=paper] .opening-shade::after{
  background:radial-gradient(ellipse 80% 70svh at 0 72svh,#080c09d9, #080c0980 55%,transparent 90%);
}
/* The approved sample framing is shared with the inline and immersive views. */
.opening-scene-layer[data-scene=toys] .opening-photograph img{
  object-position:var(--prepared-photo-position);transform-origin:50% 0;
  transform:translateY(var(--prepared-photo-lift)) scale(var(--prepared-photo-scale));
  mask-image:linear-gradient(#000 0 78%,transparent 100%);
}
.opening-scene-layer[data-scene=toys] .opening-video video{
  object-position:80% 50%;transform-origin:70% 0;
  /* The seller's active picture is only 480px wide. A small lift keeps the
     animals in view without the former 18% zoom amplifying compression. */
  transform:translateY(-6%) scale(1.06);filter:brightness(1.1);
}
[data-scene=toys] .opening-shade::after{
  background:radial-gradient(ellipse 80% 70svh at 0 72svh,#080c09cc,#080c0966 55%,transparent 90%);
}
@media(max-width:760px){
  .opening-scene-layer[data-scene=toys] .opening-photograph img{
    height:var(--prepared-photo-mobile-height);object-position:var(--prepared-photo-mobile-position);
    transform:translateY(var(--prepared-photo-mobile-lift)) scale(var(--prepared-photo-scale));
  }
  .opening-scene-layer[data-scene=toys] .opening-video video{
    height:75%;object-position:80% 50%;transform:translateY(-5%) scale(1.02);
    mask-image:linear-gradient(#000 0 78%,transparent 100%);
  }
  [data-scene=toys] .opening-shade::after{
    background:linear-gradient(180deg,transparent 24svh,#080c0933 31svh,#080c0999 45svh,#080c0973 68svh,transparent 90svh),radial-gradient(ellipse 80% 70svh at 0 72svh,#080c09cc,#080c0966 55%,transparent 90%);
  }
  /* On a phone the copy crosses the seam. Show the film's embossed left
     edge here, keeping its printed names outside that shared reading area. */
  .opening-scene-layer[data-scene=paper] .opening-video video{
    object-position:0 0;transform-origin:0 0;transform:translateY(-20%) scale(1.6);
  }
  [data-scene=paper] .opening-shade::after{
    background:linear-gradient(180deg,transparent 24svh,#080c0926 31svh,#080c0980 45svh,#080c0966 68svh,transparent 90svh),radial-gradient(ellipse 80% 70svh at 0 72svh,#080c09d9,#080c0980 55%,transparent 90%);
  }
}
@media(prefers-reduced-motion:reduce){.opening-shade::after{transition:none}}

/* The complete hero dock belongs to one medium. Position is collision-checked
   in JS; CSS must not tween the seam past a safe placement between frames. */
.cinema-hero:not([data-magnetic-dock]) .opening-control-cluster{visibility:hidden}
.cinema-hero[data-magnetic-dock] .opening-tools{inset:0;display:block}
.cinema-hero[data-magnetic-dock] .opening-tools:has([data-paired-dock-dragging=true]){z-index:7}
.cinema-hero[data-magnetic-dock] .opening-control-cluster{position:absolute;width:max-content;max-width:none;z-index:5}
.cinema-hero[data-magnetic-dock] [data-hero-media-control]{position:relative;flex:none}
.cinema-hero[data-magnetic-dock] .opening-scene-layer{transition-property:opacity,gap}
.cinema-hero[data-magnetic-dock] .paired-media-divider{transition:none}
@media(max-width:760px){
 .cinema-hero[data-magnetic-dock] .opening-control-cluster{width:144px}
 .cinema-hero[data-magnetic-dock] .opening-scene-picker{margin-top:3px}
 .cinema-hero[data-magnetic-dock] .opening-scene-picker button{width:24px;height:32px;min-width:24px;padding:0}
 .cinema-hero[data-magnetic-dock] .opening-scene-arrow span{font-size:20px}
 .cinema-hero[data-magnetic-dock] .opening-shop{flex-direction:column;align-items:center;font-size:11px;line-height:15px;max-width:100%}
 .cinema-hero[data-magnetic-dock] .opening-shop>[data-hero-category]::before{content:none}
}