/* Opt-in presentation variants. Reference values intentionally add no rules.
   No layout/width animation, artwork substitute, remote image or font import. */

body[data-typography="editorial"] :is(.scene-heading h1,.caption-copy h2,#reading h2,.design-text){font-weight:700;letter-spacing:-.045em}
body[data-typography="editorial"] :is(.caption-detail h3,#reading h3){font-weight:500;letter-spacing:-.02em}
body[data-typography="editorial"] :is(.caption-copy p,#reading p){letter-spacing:.008em}
body[data-typography="technical"] :is(.scene-heading h1,.caption-copy h2,.caption-detail h3,#reading h2,#reading h3,.node-label,.design-text){font-family:Mono,"IBM Plex Mono",monospace;font-weight:400;letter-spacing:-.035em}
body[data-typography="technical"] nav a{font-family:Mono,"IBM Plex Mono",monospace;font-size:clamp(12px,1.05vw,14px);letter-spacing:-.025em}
body[data-typography="technical"] :is(.scene-heading h1,#scene-title){font-size:clamp(27px,3vw,49px);line-height:1.16}

/* The real CSS color stays opaque for source-pixel vapour. WebKit text fill
   clips only the decorative gradient; canvas capture retains the base ink. */
body[data-text-effect="shimmer"] :is(.design-text:not(.spotlight),#scene-title){color:rgb(205,230,236);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,rgba(255,255,255,0) calc(50% - 75px),rgb(255,255,255),rgba(255,255,255,0) calc(50% + 75px)),linear-gradient(rgb(196,217,225),rgb(196,217,225));background-size:250% 100%,auto;background-repeat:no-repeat,padding-box;background-clip:text;-webkit-background-clip:text;animation:design-shimmer 7s linear infinite}
body[data-text-effect="flow"] :is(.design-text:not(.spotlight),#scene-title){color:rgb(214,229,242);-webkit-text-fill-color:transparent;background-image:linear-gradient(110deg,rgb(197,242,239),rgb(204,189,243),rgb(231,242,250),rgb(197,242,239));background-size:400px 100%;background-repeat:repeat-x;background-clip:text;-webkit-background-clip:text;animation:design-text-flow 12s ease-in-out infinite}
body[data-text-effect="shimmer"] .node-label.spotlight{color:rgb(215,239,242);-webkit-text-fill-color:currentColor;animation:design-label-light 7s ease-in-out infinite}
body[data-text-effect="flow"] .node-label.spotlight{color:rgb(219,226,245);-webkit-text-fill-color:currentColor;animation:design-label-flow 12s ease-in-out infinite}
@keyframes design-shimmer{from{background-position:100% center}to{background-position:0% center}}
@keyframes design-text-flow{0%,100%{background-position:0 center}50%{background-position:200px center}}
@keyframes design-label-light{0%,100%{text-shadow:0 0 0 rgba(193,242,249,0)}50%{text-shadow:0 0 15px rgba(193,242,249,.36)}}
@keyframes design-label-flow{0%,100%{text-shadow:0 0 9px rgba(156,222,241,.18)}50%{text-shadow:0 0 13px rgba(188,160,238,.38)}}
body:is(.motion-off,.is-transitioning,.is-starting,.is-booting,.is-preparing)[data-text-effect]:not([data-text-effect="reference"]) :is(.design-text,#scene-title,.node-label){animation-play-state:paused!important}

/* The existing masked, multicolour Spotlight borders/pointer lights remain.
   These variants change the captured surface, not the gallery transform. */
body[data-container="glass"] :is(.spotlight,#reading){background:linear-gradient(135deg,rgba(39,62,79,.89),rgba(10,23,37,.91));border-color:rgba(209,235,246,.38);border-radius:18px;backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 18px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(228,245,251,.18)}
body[data-container="glass"] .spotlight:before{opacity:.52}
body[data-container="glass"] :is(.action,.contact-cta,.orbit-controls,.background-menu summary,.design-menu summary){color:rgb(225,240,247);background:linear-gradient(135deg,rgba(42,67,85,.93),rgba(15,31,48,.96));border:1px solid rgba(202,229,243,.34);border-radius:10px;box-shadow:inset 0 1px 0 rgba(232,245,251,.12)}
body[data-container="holographic"] :is(.spotlight,#reading){background:linear-gradient(135deg,rgba(7,31,44,.97),rgba(6,15,28,.97));border-color:rgba(109,231,239,.52);border-radius:5px;box-shadow:0 17px 48px rgba(0,0,0,.48),inset 0 0 27px rgba(68,171,206,.07),0 0 17px rgba(94,210,229,.07)}
body[data-container="holographic"] .spotlight:before{opacity:.78}
body[data-container="holographic"] :is(.action,.contact-cta,.orbit-controls,.background-menu summary,.design-menu summary){color:rgb(208,241,247);background:linear-gradient(110deg,rgba(16,53,70,.97),rgba(13,31,51,.97));border:1px solid rgba(115,218,232,.43);border-radius:4px;box-shadow:inset 0 0 16px rgba(62,165,198,.07)}
body:is([data-container="glass"],[data-container="holographic"]) :is(.action:hover,.contact-cta:hover,.orbit-controls button:hover){color:rgb(240,252,255);border-color:rgba(206,246,251,.66)}

/* Header height and the page's fixed stage inset remain the reference values.
   Design/language/mobile controls stay in their existing accessible flow. */
body[data-navigation="capsule"] header{background:linear-gradient(rgba(3,11,18,.97),rgba(3,11,18,.72) 70%,rgba(3,11,18,0));gap:18px}
body[data-navigation="capsule"] nav{gap:7px;padding:5px 10px;border:1px solid rgba(149,206,222,.25);border-radius:999px;background:rgba(8,26,39,.83);box-shadow:inset 0 1px 0 rgba(187,227,239,.07)}
body[data-navigation="capsule"] nav a{padding:8px 9px;border-radius:999px;font-size:14px}
body[data-navigation="capsule"] nav a[aria-current]{background:rgba(142,221,231,.12);color:rgb(223,248,250)}
body[data-navigation="capsule"] nav a[aria-current]:after{left:13px;right:13px;bottom:4px}
body[data-navigation="command"] header{background:linear-gradient(rgba(6,17,29,.98),rgba(7,20,33,.87) 85%,rgba(7,20,33,0));border-bottom:1px solid rgba(114,174,195,.17);gap:19px}
body[data-navigation="command"] nav{gap:14px}
body[data-navigation="command"] nav a{font-family:Mono,"IBM Plex Mono",monospace;font-size:13px;letter-spacing:-.03em;color:rgb(181,208,222)}
body[data-navigation="command"] nav a[aria-current]{color:rgb(207,245,246);text-shadow:0 0 12px rgba(144,225,239,.2)}

/* Dark theme variants retain readable light ink and existing artwork colours. */
body[data-theme="violet"]{--ink:#eeeafa;--soft:#bbb5d3;--cyan:#c4b1f2;--design-accent:#c8b7ef;--design-surface-a:#201d36;--design-surface-b:#101424;--design-header-a:rgba(13,12,28,.98);--design-header-b:rgba(13,12,28,.78)}
body[data-theme="silver"]{--ink:#eef3f6;--soft:#b5c7d0;--cyan:#c1e0e7;--design-accent:#c2dbe5;--design-surface-a:#1b2b36;--design-surface-b:#0e1925;--design-header-a:rgba(9,18,26,.98);--design-header-b:rgba(9,18,26,.78)}
body:is([data-theme="violet"],[data-theme="silver"]){color:var(--ink)}
body:is([data-theme="violet"],[data-theme="silver"]) :is(.scene-heading h1,.caption-copy h2,#reading h2,.caption-detail h3,#reading h3,.node-label){color:var(--ink)}
body:is([data-theme="violet"],[data-theme="silver"]) :is(.caption-copy p,.caption-detail p,#reading p,#scene-intro,#scene-subtitle){color:var(--soft)}
body:is([data-theme="violet"],[data-theme="silver"]) .spotlight{background:linear-gradient(135deg,var(--design-surface-a),var(--design-surface-b));border-color:var(--design-accent)}
body:is([data-theme="violet"],[data-theme="silver"]) header{background:linear-gradient(var(--design-header-a),var(--design-header-b) 75%,rgba(3,11,18,0))}
body:is([data-theme="violet"],[data-theme="silver"]) nav a[aria-current]{color:var(--cyan)}

@media(max-width:1330px) and (min-width:901px){body[data-navigation="capsule"] header{gap:13px}body[data-navigation="capsule"] nav{gap:3px;padding:4px 6px}body[data-navigation="capsule"] nav a{font-size:13px;padding:8px 7px}body[data-navigation="command"] nav{gap:11px}body[data-navigation="command"] nav a{font-size:12px}}
@media(max-width:900px){body[data-typography="technical"] :is(.scene-heading h1,#scene-title){font-size:27px}body[data-typography="technical"] .node-label{font-size:13px}body[data-navigation="capsule"] nav{border-radius:12px;padding:12px}body[data-navigation="capsule"] nav a{font-size:15px;padding:12px;border-radius:6px}body[data-navigation="command"] nav a{font-size:14px;padding:12px}body:is([data-container="glass"],[data-container="holographic"]) :is(.object-caption,#reading){backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
@media(prefers-reduced-motion:reduce){body[data-text-effect] :is(.design-text,#scene-title,.node-label){animation:none!important;background-position:50% center!important}}