/* ==========================================================
   TALOS — immersive layer: 3D hero, scroll reel, 3D layers,
   3D gallery, video band, tilt. Loaded after pages.css.
   ========================================================== */

/* ---------- Header fit on laptops ---------- */
.nav a, .nav__btn, .brand__sub, .brand__name { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { gap: 22px; }
  .header__inner { gap: 20px; }
  .header__phone { display: none !important; }
  .brand__sub { letter-spacing: .24em; }
}

/* ---------- Scroll reel ---------- */
.reel { position: relative; height: 320vh; background: #040404; }
.reel__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.reel__frame { position: relative; width: 100%; height: 100%; overflow: hidden; transform: scale(var(--s, .62)); border-radius: var(--r, 6px); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); will-change: transform; }
.reel__media { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.reel__media.is-on { opacity: 1; }
.reel__media img, .reel__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--k, 1.12)); will-change: transform; }
.reel__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 4, 4, .88) 0%, rgba(4, 4, 4, .55) 42%, rgba(4, 4, 4, .05) 75%), linear-gradient(0deg, rgba(4, 4, 4, .75), transparent 45%); opacity: var(--o, .6); }
.reel__caption { position: absolute; left: clamp(22px, 7vw, 110px); bottom: clamp(40px, 12vh, 120px); max-width: 560px; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 30px)); }
.reel__title { display: grid; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; font-weight: 300; margin-bottom: 22px; }
.reel__title span, .reel__text span { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reel__title span.is-on, .reel__text span.is-on { opacity: 1; transform: none; }
.reel__text { display: grid; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text); }
.reel__dots { display: flex; gap: 10px; margin-top: 30px; }
.reel__dots li { width: 34px; height: 2px; background: rgba(255, 255, 255, .2); transition: background .5s; }
.reel__dots li.is-on { background: var(--gold); }

/* ---------- Anatomy: 3D exploded layers ---------- */
.anatomy { background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.anatomy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.anatomy__copy .h2 { margin-bottom: 24px; }
.anatomy__legend { margin-top: 34px; border-top: 1px solid var(--line); }
.anatomy__legend li { display: flex; gap: 18px; padding: 16px 10px; border-bottom: 1px solid var(--line); cursor: default; transition: background-color .3s; }
.anatomy__legend li:hover, .anatomy__legend li.is-hl { background: rgba(201, 166, 97, .07); }
.anatomy__legend b { font: 600 .74rem/1.9 var(--display); color: var(--gold); }
.anatomy__legend strong { display: block; font: 400 1.3rem/1.2 var(--serif); color: var(--ivory); margin-bottom: 2px; }
.anatomy__legend span { font-size: .9rem; color: var(--muted); }
.stack3d { position: relative; height: clamp(360px, 52vw, 560px); perspective: 1400px; display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stack3d:active { cursor: grabbing; }
.stack3d::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 6%; height: 30%; background: radial-gradient(50% 50% at 50% 50%, rgba(201, 166, 97, .18), transparent 70%); pointer-events: none; }
.stack3d__scene { position: relative; width: clamp(180px, 22vw, 270px); height: clamp(240px, 30vw, 360px); transform-style: preserve-3d; transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -38deg)); transition: transform .2s linear; }
.stack3d__layer { --gap: 0px; position: absolute; inset: 0; border-radius: 3px; transform: translateZ(calc(var(--i) * var(--gap))); transition: transform 1.3s var(--ease), box-shadow .4s, opacity .4s; transform-style: preserve-3d; }
.stack3d.is-open .stack3d__layer { --gap: clamp(34px, 5vw, 64px); }
.stack3d__layer span { position: absolute; right: -12px; top: 50%; transform: translate(100%, -50%) rotateZ(38deg); font: 700 .58rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; opacity: 0; transition: opacity .6s .6s; }
.stack3d.is-open .stack3d__layer span { opacity: .9; }
.stack3d__layer.l0 { --i: 0; background: linear-gradient(135deg, rgba(210, 225, 235, .32), rgba(120, 140, 155, .18)); border: 1px solid rgba(255, 255, 255, .45); box-shadow: inset 0 0 40px rgba(255, 255, 255, .08); }
.stack3d__layer.l1 { --i: 1; background: rgba(255, 244, 214, .16); border: 1px dashed rgba(243, 221, 165, .5); }
.stack3d__layer.l2 { --i: 2; background: repeating-linear-gradient(0deg, rgba(201, 166, 97, .26) 0 2px, rgba(201, 166, 97, .12) 2px 7px); border: 1px solid rgba(232, 205, 148, .7); box-shadow: 0 0 30px rgba(201, 166, 97, .25); }
.stack3d__layer.l3 { --i: 3; background: linear-gradient(120deg, rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .02) 60%); border: 1px solid rgba(255, 255, 255, .35); }
.stack3d__layer.l4 { --i: 4; inset: -14px; background: none; border: 12px solid #7c7a76; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(232, 205, 148, .6); }
.stack3d__layer.is-hl { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 40px rgba(232, 205, 148, .5); }
.stack3d__layer.l4.is-hl { border-color: var(--gold); }
.stack3d.has-hl .stack3d__layer:not(.is-hl) { opacity: .35; }
@media (min-width: 1024px) { .anatomy__grid { grid-template-columns: .95fr 1.05fr; gap: 60px; } }

/* ---------- Portfolio: 3D gallery ---------- */
.portfolio { overflow: hidden; }
.pf-track { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px max(var(--gutter), calc((100vw - 1240px) / 2)) 40px; perspective: 1600px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-track::-webkit-scrollbar { display: none; }
.pf-track:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -4px; }
.pf { position: relative; flex: 0 0 min(430px, 76vw); aspect-ratio: 3 / 4; margin: 0; overflow: hidden; scroll-snap-align: center; border: 1px solid var(--line-2); border-radius: 3px; background: #0b0b0b; transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transform-origin: center; opacity: var(--op, 1); will-change: transform; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); }
.pf img { width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--px, 0px)) scale(1.12); transition: transform .1s linear; }
.pf figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 24px 24px; font: 300 1.55rem/1.15 var(--serif); color: var(--ivory); background: linear-gradient(0deg, rgba(4, 4, 4, .92), transparent); }
.pf figcaption small { display: block; margin-bottom: 8px; font: 700 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

/* ---------- Video band ---------- */
.vband { position: relative; isolation: isolate; overflow: hidden; min-height: 86vh; display: flex; align-items: center; padding: 110px 0; border-block: 1px solid var(--line); background: #060606; }
.vband__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vband__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .6) 50%, rgba(5, 5, 5, .25) 100%), linear-gradient(0deg, rgba(5, 5, 5, .6), transparent 50%); }
.vband .h2 { max-width: 14ch; margin-bottom: 30px; }
.vband__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; max-width: 640px; }
.vband__list li { padding: 11px 16px; font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); border: 1px solid var(--line-2); border-radius: 100px; background: rgba(6, 6, 6, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- 3D tilt ---------- */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt].is-tilting { transition: transform .12s linear, border-color .5s var(--ease), box-shadow .6s var(--ease) !important; transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px) !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel__sticky { position: relative; height: 80vh; }
  .reel__frame { transform: none; border-radius: 0; }
  .reel__caption { opacity: 1; transform: none; }
  .reel__media img, .reel__media video { transform: none; }
  .stack3d__layer { --gap: clamp(34px, 5vw, 64px); }
  .pf { transform: none; opacity: 1; }
}


/* ---------- Cinematic hero ---------- */
.cine { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #050505; }
.cine__media { position: absolute; inset: 0; z-index: -1; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.cine__still, .cine__still img, .cine__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine__still img, .cine__video { object-fit: cover; object-position: 50% 58%; }
.cine__still img { transform-origin: 56% 52%; animation: cineDrift 34s ease-in-out infinite alternate, cineIn 2.4s var(--ease) both; }
.cine__video { opacity: 0; transition: opacity 1.6s var(--ease); }
.cine.has-video .cine__video { opacity: 1; }
.cine.has-video .cine__still { opacity: 0; transition: opacity 1.6s var(--ease); }
.cine__glow { position: absolute; inset: 0; background: radial-gradient(22% 30% at 57% 50%, rgba(255, 196, 120, .22), transparent 70%), radial-gradient(18% 22% at 36% 62%, rgba(255, 190, 110, .14), transparent 70%); mix-blend-mode: screen; animation: cineGlow 7s ease-in-out infinite alternate; }
.cine__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .62) 34%, rgba(5, 5, 5, .12) 64%, rgba(5, 5, 5, .05) 100%), linear-gradient(0deg, rgba(5, 5, 5, .95) 0%, rgba(5, 5, 5, .35) 30%, transparent 55%), linear-gradient(180deg, rgba(5, 5, 5, .7) 0%, transparent 22%); }
.cine__grain { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cine__inner { padding-top: calc(var(--header-h) + 60px); opacity: var(--fade, 1); transform: translate3d(0, calc((1 - var(--fade, 1)) * -40px), 0); }
.cine__title { font-size: clamp(3.2rem, 8.4vw, 7.6rem); line-height: .94; font-weight: 300; letter-spacing: -.025em; max-width: 11ch; text-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.cine__title .gold { display: inline-block; }
.cine__lead { margin-top: 28px; max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.7; color: #ddd6c7; }
.cine__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.cine__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 8vh, 90px); padding-top: 24px; padding-bottom: 34px; border-top: 1px solid rgba(201, 166, 97, .22); opacity: var(--fade, 1); }
.cine__facts { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.cine__facts li { display: flex; align-items: center; gap: 12px; font: 600 .66rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #bfb8a8; }
.cine__facts li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.cine__scroll { display: none; align-items: center; gap: 14px; font: 600 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); }
.cine__scroll i { position: relative; width: 1px; height: 46px; background: rgba(201, 166, 97, .3); overflow: hidden; }
.cine__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold-hi); animation: cineScroll 2.2s var(--ease) infinite; }
.js .cine .reveal { opacity: 1; transform: none; transition: none; animation: heroIn 1.2s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 350ms); }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cineDrift { from { transform: scale(1.06) translate3d(-1.6%, .4%, 0); } to { transform: scale(1.17) translate3d(2.2%, -1.2%, 0); } }
@keyframes cineIn { from { filter: brightness(.35) saturate(.7); } to { filter: none; } }
@keyframes cineGlow { from { opacity: .55; } to { opacity: 1; } }
@keyframes cineScroll { from { top: -40%; } to { top: 100%; } }
@media (min-width: 1024px) { .cine__scroll { display: flex; } }
@media (max-width: 700px) {
  .cine__still img, .cine__video { object-position: 58% 50%; }
  .cine__shade { background: linear-gradient(0deg, rgba(5, 5, 5, .98) 0%, rgba(5, 5, 5, .9) 40%, rgba(5, 5, 5, .55) 58%, rgba(5, 5, 5, .1) 76%, rgba(5, 5, 5, .55) 100%); }
  .cine__inner { padding-top: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cine__still img, .cine__glow, .cine__scroll i::after { animation: none; }
  .js .cine .reveal { animation: none; }
  .cine__media, .cine__inner { transform: none; }
}

/* ---------- Animated Talos logo (intro + end card) ---------- */
@property --la-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.la { position: relative; aspect-ratio: 800 / 912; width: 100%; }
.la img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.la__ring { -webkit-mask: conic-gradient(from 180deg, #000 var(--la-a), transparent 0); mask: conic-gradient(from 180deg, #000 var(--la-a), transparent 0); }
.la__wclip { position: absolute; inset: 0; clip-path: inset(0 0 27% 0); }
.la__words { opacity: 0; }
.la__front { opacity: 0; }
.la__flash { position: absolute; left: 12%; right: 12%; top: 50%; height: 30%; opacity: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 226, 160, .55), transparent 70%); mix-blend-mode: screen; }
.la.is-play .la__ring { animation: laRing 1.1s cubic-bezier(.6, 0, .2, 1) .1s both; }
.la.is-play .la__house { animation: laHouse .9s cubic-bezier(.2, .8, .2, 1) .55s both, laThud .35s ease-out 2.55s; }
.la.is-play .la__warrior { animation: laClimb 1.55s cubic-bezier(.3, .1, .2, 1) 1.1s both; }
.la.is-play .la__front { animation: laPlant .5s cubic-bezier(.2, .9, .3, 1.2) 2.55s both; }
.la.is-play .la__flash { animation: laFlash .9s ease-out 2.55s both; }
.la.is-play .la__words { animation: laWords 1s var(--ease) 2.9s both; }
@keyframes laRing { from { --la-a: 0deg; opacity: .2; } to { --la-a: 360deg; opacity: 1; } }
@keyframes laHouse { from { clip-path: inset(100% 0 0 0); transform: translateY(3%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes laThud { 0% { transform: translateY(0); } 30% { transform: translateY(.5%); } 100% { transform: translateY(0); } }
@keyframes laClimb { 0% { transform: translateY(68%); } 30% { transform: translateY(30%); } 42% { transform: translateY(28%) rotate(-.6deg); } 78% { transform: translateY(-3.5%); } 90% { transform: translateY(.8%); } 100% { transform: none; } }
@keyframes laPlant { from { opacity: 0; transform: translateY(-5%); filter: brightness(2.2); } to { opacity: 1; transform: none; filter: none; } }
@keyframes laFlash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes laWords { from { opacity: 0; transform: translateY(3%); letter-spacing: .02em; filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Intro overlay */
html.intro::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #050505; }
.intro-ov { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #050505; transition: clip-path 1.1s cubic-bezier(.8, 0, .2, 1); clip-path: inset(0 0 0 0); }
.intro-ov.is-out { clip-path: inset(0 0 100% 0); }
.intro-ov .la { width: min(46vh, 64vw); }
.intro-ov__skip { position: absolute; right: 22px; bottom: 22px; padding: 10px 14px; font: 600 .62rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 100px; cursor: pointer; }
.intro-ov__skip:hover { color: var(--gold-hi); border-color: var(--gold); }
@supports not (mask: conic-gradient(#000 0deg, transparent 0)) { .la__ring { -webkit-mask: none; mask: none; } }

/* Anchoring colour beads */
.beads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 56px; }
.bead { margin: 0; }
.bead .ph { aspect-ratio: 4 / 3; border: 1px solid var(--line-2); border-radius: 3px; }
.bead figcaption { padding-top: 14px; font-size: .92rem; color: var(--muted); }
.bead figcaption b { display: block; margin-bottom: 2px; font: 400 1.35rem/1.2 var(--serif); color: var(--ivory); }
@media (min-width: 700px) { .beads { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Own install footage ---------- */
.ph video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.field__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1024px) { .field__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.clip { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line-2); border-radius: 3px; background: #0a0a0a; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease); }
.clip:hover video { transform: scale(1.04); }
.clip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; display: grid; gap: 4px; background: linear-gradient(0deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .55) 55%, transparent); }
.clip__n { font: 700 .6rem/1 var(--sans); letter-spacing: .28em; color: var(--gold); }
.clip b { font: 400 1.35rem/1.15 var(--serif); color: var(--ivory); }
.clip small { font-size: .8rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 600px) {
  .clip figcaption { padding: 36px 12px 12px; }
  .clip b { font-size: 1.05rem; }
  .clip small { display: none; }
}