/* Studio motion system: scroll depth, motion paths, masks and spring response. */
:root {
  --studio-ice: #b9ddff;
  --studio-aqua: #77f6e2;
  --studio-night: #06141c;
  --studio-white: #edfaff;
  --studio-muted: #b8d1db;
  --studio-edge: #6a9da9;
  --paper: #e7f0f3;
  --ink: #10232c;
  --muted: #465f6a;
  --studio-ease: cubic-bezier(.19, 1, .22, 1);
  --studio-spring: cubic-bezier(.2, .9, .25, 1.12);
}

/* Chrome midnight: the existing artwork and guardians carry the identity. */
.header {
  background: #06141cf2;
  color: var(--studio-white);
  border-bottom-color: #6a9da970;
}
.header .brand-letters { color: var(--studio-aqua); }
.header .brand-caption { border-color: var(--studio-edge); }
.header .nav a sup { color: var(--studio-muted); }
.header .nav a span::after { background: var(--studio-aqua); }
.header .talk { border-color: var(--studio-edge); border-radius: 4px; }
.header .talk:hover { background: var(--studio-aqua); color: var(--studio-night); }
.header :focus-visible { outline-color: var(--studio-aqua); }
.hero {
  --paper: var(--studio-night);
  --ink: var(--studio-white);
  --muted: var(--studio-muted);
  --line: #6a9da966;
  color: var(--studio-white);
  background: radial-gradient(ellipse at 85% 60%, #124555 0, transparent 55%), var(--studio-night);
  column-gap: clamp(24px, 4vw, 64px);
}
.hero > .depth-field { opacity: .22; }
.hero-title-row .rule-stamp { color: var(--studio-aqua); }
.hero h1 {
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}
.hero .meta-tag {
  background: transparent;
  color: var(--studio-aqua);
  font-size: .48em;
  font-weight: 500;
  letter-spacing: -.025em;
  padding: 0 0 10px;
  margin-bottom: 15px;
  border: 0;
  border-bottom: 1px solid var(--studio-edge);
  box-shadow: none;
  transform: none;
}
.hero .communication { letter-spacing: inherit; }
.hero .speech-mark { color: var(--studio-aqua); border-color: var(--studio-edge); }
.hero-copy > p { color: var(--studio-muted); font-size: 16px; line-height: 1.7; }
.hero .eyebrow { color: var(--studio-muted); }
.hero .button.filled { background: var(--studio-aqua); color: var(--studio-night); border-color: var(--studio-aqua); }
.hero .button.filled:hover { box-shadow: 4px 4px var(--studio-white); }
.hero .underlink { color: var(--studio-white); border-color: var(--studio-edge); }
.hero .small-control { border-color: var(--studio-edge); color: var(--studio-white); }
.hero .small-control:hover { background: #77f6e21a; border-color: var(--studio-aqua); }
.hero :focus-visible { outline-color: var(--studio-aqua); }
.hero-bottom { color: var(--studio-muted); }
.signal-strip { background: var(--studio-aqua); color: var(--studio-night); padding-block: 16px; }
.signal-strip b { color: var(--studio-night); }
.world, .approach { background-color: var(--paper); }
.contact { background: #99f2e1; }
.work-card:hover { border-color: var(--studio-aqua); }
.motion.motion-dock { left: auto; right: max(20px, env(safe-area-inset-right)); background: #06141cf2; border-color: var(--studio-edge); color: var(--studio-white); }
.motion.motion-dock[aria-pressed="true"] { background: #e7f0f3f5; color: #10232c; }
.motion-dock .motion-action { color: #c3e5dc; }
.menu-toggle { min-width: 44px; }

@supports (animation-timing-function: linear(0, 1)) {
  :root { --studio-spring: linear(0, .15, .45, .73, .93, 1.035, 1.065, 1.045, 1.015, .998, 1); }
}

/* Decorative layers belong to their section, behind the readable content. */
main > section { isolation: isolate; }
.depth-field, .edge-actor, .signal-route { pointer-events: none; user-select: none; }
.depth-field {
  position: absolute;
  inset: -100px -8%;
  z-index: -1;
  opacity: .56;
  background: radial-gradient(ellipse at 85% 25%, #8fdce657, transparent 47%),
    radial-gradient(ellipse at 8% 83%, #a2bce544, transparent 41%);
  transform: translate3d(0, var(--depth-y, 0px), 0);
}
.depth-field::before {
  content: '';
  position: absolute;
  width: min(78vw, 1100px);
  aspect-ratio: 1;
  right: -19%;
  top: 12%;
  border: 1px solid #318b7c30;
  border-radius: 50%;
  box-shadow: 0 0 0 70px #318b7c08, 0 0 0 140px #318b7c06;
  transform: scaleY(.58) rotate(-28deg);
}
.dark > .depth-field {
  opacity: .85;
  background: radial-gradient(ellipse at 88% 28%, #27768838, transparent 48%),
    radial-gradient(ellipse at 15% 86%, #586ec826, transparent 44%);
}
.dark > .depth-field::before { border-color: #8ddff124; box-shadow: 0 0 0 70px #8ddff105, 0 0 0 140px #8ddff105; }
.edge-actor {
  position: absolute;
  width: 300px;
  height: 330px;
  right: -15px;
  top: 90px;
  z-index: -1;
  overflow: visible;
  opacity: .58;
}
.edge-art-fragment {
  position: absolute;
  width: 225px;
  height: 280px;
  right: -70px;
  top: 0;
  padding: 7px;
  border: 1px solid #446d686b;
  background: #d6e7de;
  box-shadow: 0 12px 24px #052e3133;
  overflow: hidden;
  transform: translate3d(var(--edge-x, 0px), var(--edge-y, 0px), 0) rotate(var(--edge-rot, -10deg));
}
.edge-art-fragment img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edge-art-fragment::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #1b444b09 0 1px, transparent 1px 3px), linear-gradient(145deg, #a9e9eb24, transparent 55%, #081c2626); pointer-events: none; }
.edge-actor.from-left { left: -15px; right: auto; transform: scaleX(-1); }
.edge-actor.from-left .edge-art-fragment { transform: translate3d(var(--edge-x, 0px), var(--edge-y, 0px), 0) rotate(var(--edge-rot, -10deg)) scaleX(-1); }
.dark .edge-actor { opacity: .48; }
.dark .edge-art-fragment { border-color: #8bcfc766; background: #162d36; }
.contact > .edge-actor { top: auto; bottom: 180px; }
.signal-route { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; opacity: .4; }
.signal-route path { fill: none; stroke: #65c6c8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--route-progress, .5); }
.signal-route .route-echo { stroke: #aacfff; opacity: .25; stroke-width: 12; }
.dark .signal-route { opacity: .23; }

/* Native timelines scrub only artwork; page scrolling keeps its native behavior. */
@supports (animation-timeline: view()) {

    body:not(.paused) main > section { view-timeline-name: --studio-section; view-timeline-axis: block; }
    body:not(.paused) .depth-field { animation: studio-depth linear both; animation-timeline: --studio-section; animation-range: entry 0% exit 100%; }
    body:not(.paused) .signal-route path { animation: studio-route linear both; animation-timeline: --studio-section; animation-range: entry 5% exit 85%; }
    body:not(.paused) .hero-title-row { view-timeline-name: --studio-title; }
    body:not(.paused) .hero-title-row::before { animation: studio-banner-drift linear both; animation-timeline: --studio-title; animation-range: entry 0% exit 100%; }
  
}
@supports (offset-path: path('M 0 0 L 10 10')) and (animation-timeline: view()) {

    body:not(.paused) .edge-art-fragment {
      right: auto; top: 0; left: 0;
      offset-path: path('M 440 80 C 300 35 140 185 185 235');
      offset-distance: 50%; offset-rotate: -8deg;
      transform: none;
      animation: studio-path linear both;
      animation-timeline: --studio-section;
      animation-range: entry 0% exit 100%;
    }
    body:not(.paused) .edge-actor.from-left .edge-art-fragment { transform: scaleX(-1); }
  
}
@keyframes studio-depth { from { transform: translate3d(-24px, 110px, 0) rotate(-4deg); } to { transform: translate3d(24px, -110px, 0) rotate(4deg); } }
@keyframes studio-path { from { offset-distance: 0%; opacity: .2; } 38% { opacity: 1; } to { offset-distance: 100%; opacity: .55; } }
@keyframes studio-route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes studio-banner-drift { from { transform: scale(1.15) translate3d(-2%, 5%, 0); } to { transform: scale(1.15) translate3d(2%, -5%, 0); } }

/* Let the original art show through a readable, layered banner. */
.hero-title-row { background: var(--studio-night); border: 1px solid var(--studio-edge); padding-block: clamp(24px, 3.4vw, 46px); }
.hero-title-row::before {
  content: ''; position: absolute; inset: -8%; z-index: 0;
  background: linear-gradient(90deg, #06141cbd, #06141c80), url('assets/editorial/violet-signal.webp?v=1') center 44% / cover;
}
.hero-title-row .adobe-wordmark { filter: drop-shadow(0 2px 8px #0006); }
.work-heading #work-title {
  background-image: linear-gradient(90deg, #06151bd9, #0623279c), url('assets/editorial/work-signal.webp');
  border-left: 2px solid #8ce6df99;
}
.studio-mask { clip-path: inset(0); }
.studio-mask.is-entering { animation: studio-unmask 900ms var(--studio-ease) both; }
@keyframes studio-unmask { from { clip-path: inset(0 100% 0 0); translate: -18px 0; } to { clip-path: inset(0); translate: 0; } }

/* Light and a floor give the original chrome guardians a dimensional stage. */
.hero-art {
  border: 1px solid var(--studio-edge);
  border-radius: 4px 4px 48px 4px;
  background: radial-gradient(ellipse at 58% 32%, #397f8b 0%, #163e51 40%, #071923 78%);
  box-shadow: inset 0 1px #d7f7ff55, 0 28px 64px -30px #000a;
  margin-block: 22px;
}
.hero-art .art-coordinate, .hero-art .art-caption { color: var(--studio-white); font-size: 10px; letter-spacing: .08em; text-shadow: 0 1px 4px #000; z-index: 4; }
.hero-art .art-coordinate { top: 20px; }
.hero-art .art-caption { bottom: 18px; }
.hero-art .panel-back { opacity: .76; border-color: #9cdaed; box-shadow: 0 14px 35px #04111b80; }
.hero-art .panel-middle { opacity: .8; border-color: #adf5de; box-shadow: 0 10px 25px #071a2377; }
.hero-art::after { border-color: #b9ddff6e; opacity: .7; }
.hero-art::before { border-color: #79f4e248; }
.hero-art .halo { opacity: .55; }
.hero-art .halo span { border-color: #adf8eb55; }
.hero-art .pixel-bar { opacity: .8; }

/* Code remains a recurring motif, with quiet ink over reading areas. */
#python-overlay[data-python-state='ready'] { opacity: .34; mask-image: linear-gradient(90deg, #000 0%, #0008 25%, #0004 48%, #0008 76%, #000 100%); }
body.revealed #python-overlay[data-python-state='ready'] { opacity: .27; }

/* Art-directed accents replace identical texture clusters in every section. */
main > section > .telegram-detail.d1, main > section > .telegram-detail.d2,
main > section > .ticker-orbits, main > section > .premium-sweep { display: none; }
main > section > .telegram-detail.d0 { opacity: .065; max-width: 180px; }
.hero > .telegram-detail, .world > .telegram-detail, .contact > .telegram-detail { display: none; }

/* Artwork presentation: enough room for the image and its actual project title. */
.work-card { color: #e9f7f1; background: #12262d; border-color: #638a8f; box-shadow: 0 30px 65px #0008, inset 0 1px #a7d8ff20; }
.card-top { color: #bdd6d8; border-color: #6b949738; font-size: 10px; }
.card-bottom { padding: 19px 20px; }
.card-bottom strong { line-height: 1.06; letter-spacing: -.045em; font-weight: 500; }
.card-bottom small { color: #b8d1d1; font-size: 10px; line-height: 1.4; margin-top: 9px; }
.play-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.play-card .commander-caption { position: absolute; inset: auto 0 0; padding: 16px; color: #e3f7f8; background: linear-gradient(transparent, #03101de8); font-size: 10px; letter-spacing: .1em; }
.world-study { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding-bottom: 28px; }
.world-study img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; border: 1px solid #749d9c; background: #0b2029; box-shadow: 0 15px 30px -20px #12333966; }
.world-study > div { padding: 0 6px; }
.world-study h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.world-study p { font-size: 14px; max-width: 470px; }
.world-study .micro { font-size: 10px; }
.nav a sup { color: #46594e; }
.eyebrow, .hero-top, .hero-bottom, .section-top, .serpent-coordinate, .serpent-footnote,
.world-feature-copy > .micro, .process-foot, .result-meta, .contact footer .micro { font-size: 10px; line-height: 1.5; }
.hero-tools .control-note { font-size: 11px; line-height: 1.5; }

/* A real entry point to the recovered studio equation. */
.quantum-link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px; align-items: center; margin-top: 44px; padding: clamp(26px, 4vw, 50px);
  border: 1px solid #598f9b; color: #e9f7fb; text-decoration: none; overflow: hidden;
  background: radial-gradient(ellipse at 85% 40%, #4d77a745, transparent 50%), #10242e;
}
.quantum-link::before { content: ''; position: absolute; width: 280px; height: 280px; right: 6%; top: -40px; border: 1px solid #8de4e54a; border-radius: 50%; transform: rotate(-35deg) scaleY(.5); pointer-events: none; }
.quantum-link .micro { color: #a3d7df; font-size: 11px; }
.quantum-link h3 { font-size: clamp(38px, 4.7vw, 64px); letter-spacing: -.055em; line-height: 1.02; margin: 16px 0 13px; font-weight: 500; }
.quantum-link p { color: #c8dce2; font-size: 15px; line-height: 1.65; max-width: 570px; }
.quantum-link .quantum-arrow { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #99e8e1; border-radius: 50%; font-size: 36px; color: #b9f8ea; }
.quantum-link:hover .quantum-arrow, .quantum-link:focus-visible .quantum-arrow { background: #abf5e6; color: #10242e; rotate: 45deg; }
.quantum-link .quantum-arrow { transition: rotate 600ms var(--studio-spring), background 220ms, color 220ms; }
.quantum-title { view-transition-name: quantum-title; }

/* The target never moves away: only its inner label responds to the pointer. */
.spring-target > span:first-child { display: inline-block; translate: var(--spring-x, 0px) var(--spring-y, 0px); transition: translate 580ms var(--studio-spring); }
.spring-target.is-pointed > span:first-child { transition: translate 160ms ease-out; }
.small-control, .yami-control, .deck-controls button { transition-timing-function: var(--studio-spring); }
.services summary b { transition: rotate 550ms var(--studio-spring); }
.services details[open] summary b { rotate: 45deg; }
.lab-console { background-image: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 40%), #a7d8ff12, transparent 45%); }

body.paused .depth-field { transform: none; }
body.paused .edge-art-fragment { offset-path: none; animation: none; transform: none; }
body.paused .edge-actor.from-left .edge-art-fragment { transform: scaleX(-1); }
body.paused .studio-mask { animation: none; clip-path: none; translate: none; }
body.paused .spring-target > span:first-child { translate: none; }

@media (max-width: 760px) {
  #approach .book-left h2 { font-size: clamp(42px, 10.4vw, 64px); line-height: 1; letter-spacing: -.065em; max-width: 100%; }
  #approach .book-left h2 br { display: initial; }
  .hero-art { margin: 18px 0 0; height: clamp(385px, 108vw, 560px); border-bottom-right-radius: 48px; }
  .hero-art .art-coordinate, .hero-art .art-caption { font-size: 9px; left: 6%; right: 6%; }
  .hero-art .art-coordinate { top: 15px; }
  .hero-art .art-caption { bottom: 16px; }
  .hero-title-row { padding-block: 23px; }
  .hero-top, .hero-bottom, .eyebrow, .section-top { font-size: 9px; }
  .hero h1 { font-size: clamp(37px, 9.8vw, 65px); }
  .hero-copy > p { font-size: 15px; }
  .motion.motion-dock { left: auto; right: max(12px, env(safe-area-inset-right)); }
  .edge-actor { width: 200px; height: 240px; right: -60px; top: 100px; opacity: .24; }
  .edge-actor.from-left { left: -70px; }
  .edge-art-fragment { width: 180px; height: 220px; }
  .dark .edge-actor { opacity: .21; }
  .contact > .edge-actor { bottom: 190px; }
  .depth-field { opacity: .38; }
  #python-overlay[data-python-state='ready'] { opacity: .2; }
  .card-top, .card-bottom small { font-size: 9px; }
  .world-studies { gap: 34px; }
  .world-study { gap: 17px; }
  .world-study h3 { font-size: 31px; }
  .quantum-link { padding: 25px 22px; gap: 14px; margin-top: 28px; }
  .quantum-link h3 { font-size: 40px; }
  .quantum-link p { font-size: 14px; }
  .quantum-link .quantum-arrow { width: 48px; height: 48px; font-size: 27px; }
  .quantum-link .micro { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) .depth-field { transform: none !important; }
  html:not(.motion-opt-in) .edge-art-fragment { offset-path: none !important; transform: none !important; animation: none !important; }
  html:not(.motion-opt-in) .edge-actor.from-left .edge-art-fragment { transform: scaleX(-1) !important; }
  html:not(.motion-opt-in) .studio-mask { animation: none !important; clip-path: none !important; translate: none !important; }
  html:not(.motion-opt-in) .spring-target > span:first-child { translate: none !important; transition: none !important; }
  html:not(.motion-opt-in) .quantum-arrow, html:not(.motion-opt-in) .services summary b { transition: none !important; }
}
@media print { .depth-field, .edge-actor, .signal-route { display: none; } }

.hero-art .panel-back { background-image: url("assets/editorial/guardian-mural.webp"); }
.hero-art .panel-middle { background-image: url("assets/editorial/guardian-fashion.webp"); }