/* "Aperture" hero: a camera push through layered artboards into an oxblood dusk, in the Oxblood & Bone theme.
   Each image slot (sky, three frame layers) is its own layer, so rendered art can replace the code art 1:1.
   Scroll drives --p (0 → 1) on .ap via aperture.js; --intro animates the push-in on load. */

/* ---------- palette (dark = dusk, light = dawn) ---------- */
:root{--ap-sky1:#12080B;--ap-sky2:#3A121B;--ap-sky3:#7A2A36;--ap-sky4:#D88C7C;--ap-cloud:rgba(242,214,204,.55);--ap-l1:#1A0C10;--ap-l2:#24111A;--ap-l3:#311620;--ap-rim:rgba(216,112,127,.55);--ap-fog:var(--bg)}
[data-mode="light"]{--ap-sky1:#F4ECE4;--ap-sky2:#E9D3C9;--ap-sky3:#D7A79C;--ap-sky4:#B9616A;--ap-cloud:rgba(255,250,245,.8);--ap-l1:#EADFD4;--ap-l2:#E2D3C6;--ap-l3:#D6C2B3;--ap-rim:rgba(110,20,35,.35)}

/* ---------- pinned stage ---------- */
.ap{padding-top:0!important;--p:0}
.ap .pin{position:relative;height:var(--pin,260vh)}
.ap .stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.ap .stage > *{position:absolute}
.ap .rails{margin-top:0}

/* sky + clouds (slot: sky.webp) */
.ap .sky{inset:-6%;background:radial-gradient(60% 50% at 62% 70%,var(--ap-sky4),transparent 70%),linear-gradient(180deg,var(--ap-sky1) 0%,var(--ap-sky2) 42%,var(--ap-sky3) 78%,var(--ap-sky4) 100%);transform:translateY(calc(var(--p) * -5%)) scale(calc(1.12 - var(--intro,1) * .12));transition:transform 2.4s cubic-bezier(.16,.84,.24,1)}
.ap .sky.img{background-size:cover;background-position:62% 60%}
.ap .clouds{inset:0;transform:translateY(calc(var(--p) * -9%))}
.ap .clouds i{position:absolute;border-radius:50%;background:var(--ap-cloud);filter:blur(18px);animation:cloud 26s ease-in-out infinite alternate}
.ap .clouds i:nth-child(1){left:48%;top:56%;width:22vw;height:8vw}
.ap .clouds i:nth-child(2){left:62%;top:62%;width:26vw;height:9vw;animation-duration:32s;opacity:.8}
.ap .clouds i:nth-child(3){left:40%;top:66%;width:18vw;height:6vw;animation-duration:22s;opacity:.7}
.ap .clouds i:nth-child(4){left:70%;top:50%;width:12vw;height:5vw;animation-duration:28s;opacity:.6}
@keyframes cloud{from{transform:translateX(-2vw)}to{transform:translateX(2vw)}}

/* subject: the work, floating in the opening (sits in front of the h1, behind the aperture) */
.ap .subject{left:67%;top:44%;width:clamp(300px,30vw,470px);transform:translate(-50%,-50%) translateY(calc(var(--p) * -16vh)) scale(calc(.9 + var(--intro,1) * .1 + var(--p) * .18));transition:transform 2.4s cubic-bezier(.16,.84,.24,1);z-index:5;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.ap .subject .laptop{animation:float 7s ease-in-out infinite}
.ap .subject .phone{position:absolute;right:-12%;bottom:-6%;width:26%;animation:float 6s ease-in-out -2s infinite}
.ap .subject .halo{position:absolute;inset:-30% -20%;z-index:-1;background:radial-gradient(closest-side,rgba(216,112,127,.45),transparent);filter:blur(20px)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* aperture: three layered artboards with an organic opening (slots: ap-1/2/3.png, transparent centers) */
.ap .ap-layer{inset:0;z-index:2;transform-origin:64% 44%;transition:transform 2.4s cubic-bezier(.16,.84,.24,1),opacity .4s}
.ap .ap-layer svg{position:absolute;inset:0;width:100%;height:100%}
.ap .l3{transform:scale(calc(1.25 - var(--intro,1) * .25 + var(--p) * 1.1))}
.ap .l2{transform:scale(calc(1.45 - var(--intro,1) * .45 + var(--p) * 1.8))}
.ap .l1{transform:scale(calc(1.7 - var(--intro,1) * .7 + var(--p) * 2.8));opacity:calc(1 - var(--p) * 1.4)}
.ap .l3 .s1{stop-color:var(--ap-l3)}.ap .l3 .s2{stop-color:color-mix(in srgb,var(--ap-l3) 70%,#000)}
.ap .l2 .s1{stop-color:var(--ap-l2)}.ap .l2 .s2{stop-color:color-mix(in srgb,var(--ap-l2) 70%,#000)}
.ap .l1 .s1{stop-color:var(--ap-l1)}.ap .l1 .s2{stop-color:color-mix(in srgb,var(--ap-l1) 75%,#000)}
[data-mode="light"] .ap .l3 .s2,[data-mode="light"] .ap .l2 .s2,[data-mode="light"] .ap .l1 .s2{stop-color:color-mix(in srgb,var(--ap-l1) 88%,#6E1423)}
.ap .ap-layer .fill{filter:drop-shadow(0 0 0 transparent)}
.ap .l2 svg,.ap .l1 svg{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.ap .hdl{fill:#F7EFE7;stroke:var(--accent-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ap .ap-layer .rim{fill:none;stroke:var(--ap-rim);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ap .l1 .rim{stroke-width:2}

/* design artifacts embedded in the rim (decorative, aria-hidden) */
.ap .bits{inset:0;z-index:3;transform-origin:62% 44%;transform:scale(calc(1.5 - var(--intro,1) * .5 + var(--p) * 2.2));opacity:calc(var(--intro,1) - var(--p) * 1.6);transition:transform 2.4s cubic-bezier(.16,.84,.24,1),opacity 1.2s}
.ap .bit{position:absolute;border-radius:14px;box-shadow:0 18px 40px -16px #000c,inset 0 1px 0 rgba(255,255,255,.35);animation:float 8s ease-in-out infinite}
.ap .bit.toggle{left:40%;top:16%;width:64px;height:34px;border-radius:999px;background:linear-gradient(180deg,#d8707f,#8e2232)}
.ap .bit.toggle::after{content:"";position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#fff,#e9dfd6);box-shadow:0 2px 6px #0006}
.ap .bit.swatch{left:83%;top:16%;width:58px;height:84px;background:linear-gradient(180deg,#C24A5B 0 33%,#F1ECE4 33% 66%,#2B141A 66%);animation-delay:-3s;transform:rotate(8deg)}
.ap .bit.type{left:54%;top:10%;width:78px;height:78px;display:grid;place-items:center;background:linear-gradient(160deg,#F7F1EA,#D9CBBD);color:#2B141A;font:400 34px/1 var(--f-sans);letter-spacing:-.04em;animation-delay:-1s}
.ap .bit.slider{left:80%;top:72%;width:150px;height:36px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation-delay:-5s}
.ap .bit.slider::before{content:"";position:absolute;left:14px;right:14px;top:17px;height:3px;border-radius:3px;background:linear-gradient(90deg,#d8707f 62%,rgba(255,255,255,.35) 62%)}
.ap .bit.slider::after{content:"";position:absolute;left:62%;top:9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0007}
.ap .bit.node{left:88%;top:44%;width:16px;height:16px;border-radius:3px;background:#fff;box-shadow:0 0 0 2px #d8707f,0 0 24px #d8707f;animation-delay:-2s}
.ap .bit.node::before{content:"";position:absolute;right:16px;top:7px;width:80px;height:2px;background:#d8707f;transform-origin:right;transform:rotate(-24deg)}
.ap .bit.cursor{left:46%;top:16%;width:0;height:0;border-radius:0;box-shadow:none;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;transform:rotate(-30deg);filter:drop-shadow(0 4px 6px #0008);animation-delay:-4s}
.ap .bit.grid{left:91%;top:30%;width:90px;height:90px;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(216,112,127,.35) 0 1px,transparent 1px 15px),repeating-linear-gradient(0deg,rgba(216,112,127,.35) 0 1px,transparent 1px 15px),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(216,112,127,.4);animation-delay:-6s}
[data-mode="light"] .ap .bit{box-shadow:0 18px 36px -18px rgba(60,20,24,.45),inset 0 1px 0 #fff}

/* glass cards (ref: right-hand cards); duplicate the rail tiles, so aria-hidden */
.ap .glass{right:clamp(20px,5vw,72px);bottom:clamp(96px,14vh,150px);z-index:6;display:flex;gap:12px;opacity:var(--intro,1);transform:translateY(calc((1 - var(--intro,1)) * 20px + var(--p) * -24vh));transition:opacity 1s .9s,transform 1.4s .9s cubic-bezier(.16,.84,.24,1)}
.ap .glass div{width:190px;padding:16px 18px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 24px 50px -24px #000c;color:#F7EFE7}
.ap .glass b{display:block;font-size:34px;font-weight:300;letter-spacing:-.05em;line-height:1}
.ap .glass span{display:block;font-size:12.5px;line-height:1.35;opacity:.8;margin-top:6px}
[data-mode="light"] .ap .glass div{color:#2B141A;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 24px 50px -24px rgba(60,20,24,.35)}

/* copy: left, low (ref 22). h1 sits behind the subject (galaxy layering); the rest stays on top */
.ap .copy{left:0;right:0;bottom:clamp(36px,7vh,80px);pointer-events:none}
.ap .copy .wrap > *{pointer-events:auto}
.ap .copy .eyebrow,.ap .copy h1{position:relative;z-index:4;transform:translateY(calc(var(--p) * -34vh));opacity:calc(var(--intro,1) - var(--p) * 1.5);transition:opacity 1.2s .5s}
.ap .copy .hmeta{position:relative;z-index:7;transform:translateY(calc(var(--p) * -14vh));opacity:calc(var(--intro,1) - var(--p) * 1.8);transition:opacity 1.2s .8s}
.ap .copy h1{color:#F7EFE7;text-shadow:0 10px 50px rgba(0,0,0,.35)}
.ap .copy .hmeta p{color:#F7EFE7;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.ap .copy .hmeta p span{color:rgba(247,239,231,.72)}
.ap .copy .chips li{color:#F7EFE7;box-shadow:inset 0 0 0 1px rgba(247,239,231,.3);background:rgba(18,8,11,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-mode="light"] .ap .copy h1,[data-mode="light"] .ap .copy .hmeta p{color:#1F1414;text-shadow:0 2px 30px rgba(255,250,245,.6)}
[data-mode="light"] .ap .copy .hmeta p span{color:#5E4F4B}
[data-mode="light"] .ap .copy .chips li{color:#1F1414;box-shadow:inset 0 0 0 1px rgba(31,20,20,.2);background:rgba(255,250,245,.45)}
.ap .scrimL{left:0;top:0;bottom:0;width:62%;z-index:3;background:linear-gradient(90deg,rgba(18,8,11,.55),transparent);opacity:calc(1 - var(--p))}
[data-mode="light"] .ap .scrimL{background:linear-gradient(90deg,rgba(244,236,228,.75),transparent)}

/* fog: dissolves the scene into the page (galaxy) */
.ap .fog{left:0;right:0;bottom:0;height:70%;z-index:8;background:linear-gradient(180deg,transparent,var(--ap-fog) 75%);opacity:calc(var(--p) * 1.6 - .3);pointer-events:none}

.ap .ap-layer svg.m{display:none}
/* narrow portrait (phones, portrait tablets): two zones, a framed window with the work above, the copy below */
@media (max-width:1100px) and (orientation:portrait){
  .ap{--top:clamp(64px,9svh,92px);--win:46svh}
  .ap .ap-layer{inset:auto 0 auto 0;top:var(--top);height:var(--win);transform-origin:50% 50%;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .ap .ap-layer svg.d{display:none}.ap .ap-layer svg.m{display:block}
  .ap .subject{left:50%;top:calc(var(--top) + var(--win) * .5);width:min(58vw,400px)}
  .ap .subject .phone{right:-8%;width:24%}
  .ap .bits{transform-origin:50% calc(var(--top) + var(--win) * .5)}
  .ap .bit{display:none}
  .ap .bit.toggle{display:block;left:7%;top:calc(var(--top) + var(--win) * .06);width:52px;height:28px}
  .ap .bit.toggle::after{width:20px;height:20px}
  .ap .bit.swatch{display:block;left:auto;right:7%;top:calc(var(--top) + var(--win) * .66);width:40px;height:58px}
  .ap .bit.cursor{display:block;left:72%;top:calc(var(--top) + var(--win) * .1)}
  .ap .glass{display:none}
  .ap .sky{background:radial-gradient(70% 40% at 50% 34%,var(--ap-sky4),transparent 70%),linear-gradient(180deg,var(--ap-sky1) 0%,var(--ap-sky2) 30%,var(--ap-sky3) 48%,var(--ap-sky1) 72%)}
  [data-mode="light"] .ap .sky{background:radial-gradient(70% 40% at 50% 34%,var(--ap-sky4),transparent 70%),linear-gradient(180deg,var(--ap-sky1) 0%,var(--ap-sky2) 30%,var(--ap-sky3) 48%,var(--ap-sky1) 72%)}
  .ap .clouds i{top:calc(var(--top) + var(--win) * .7)!important;height:7vw}
  .ap .scrimL{display:none}
  .ap .copy{top:auto;bottom:max(28px,env(safe-area-inset-bottom))}
  .ap .copy h1{font-size:clamp(46px,12.5vw,96px)}
  .ap .copy .hmeta{margin-top:18px}
  .ap .copy .hmeta p{font-size:clamp(17px,4.4vw,21px)}
  .ap .copy .chips{margin-top:16px}
  .ap .copy .eyebrow,.ap .copy h1{transform:translateY(calc(var(--p) * -10vh));opacity:calc(var(--intro,1) - var(--p) * 2.2)}
  .ap .copy .hmeta{transform:translateY(calc(var(--p) * -6vh))}
}
/* narrow landscape and small desktops: keep desktop composition, drop extras */
/* portrait tablets: copy sits right under the window instead of at the bottom edge */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  .ap{--win:min(46svh,62vw)}
  .ap .subject{width:min(60vw,560px)}
  .ap .copy{bottom:auto!important;top:calc(var(--top) + var(--win) + 3svh)}
  .ap .bit.type{left:58%;top:calc(var(--top) + var(--win) * .02)}
}
/* short landscape (phones on their side): copy left, work right, no pinned fly-through */
@media (orientation:landscape) and (max-height:560px){
  .ap .pin{height:auto}.ap .stage{position:relative;min-height:max(100svh,360px)}
  .ap .glass,.ap .bits{display:none}
  .ap .subject{left:78%;top:58%;width:30vw}
  .ap .ap-layer{transform-origin:78% 58%}
  .ap .copy{bottom:20px}
  .ap .copy .wrap{padding-right:42%}
  .ap .copy h1{font-size:clamp(36px,5.6vw,52px)}
  .ap .copy .hmeta{margin-top:12px}.ap .copy .hmeta p{font-size:15px;max-width:none}
  .ap .copy .chips{margin-top:12px}
  .ap .fog{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ap .pin{height:auto}.ap .stage{position:relative}
  .ap *,.ap *::before,.ap *::after{animation:none!important;transition:none!important}
  .ap .fog{display:none!important}
}