/* ============================================================
   RAW STUDIO — MOTION LAYER
   ------------------------------------------------------------
   Loads after style.css. Adds the custom cursor, scroll reveals,
   morphing shapes and hover interactions.

   The whole idea: the site behaves like a camera. The cursor is
   a focus reticle, sections open like a shutter, and headlines
   resolve out of timecode into type.

   Colours are taken straight from the existing tokens in
   style.css — nothing new is introduced.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-gate: cubic-bezier(.7,0,.2,1);
  --gate-glow: rgba(232,68,42,.30);
}

/* ============================================================
   1. CUSTOM CURSOR — a camera focus reticle
   Four corner brackets + a centre dot. It grows, locks on to
   cards, and shows a one-word label for what a click will do.
   Real mice only: touch devices never see it.
   ============================================================ */
.cursor-on, .cursor-on a, .cursor-on button, .cursor-on select,
.cursor-on input, .cursor-on textarea, .cursor-on .pf-card, .cursor-on label{
  cursor:none;
}

.rs-cursor{
  position:fixed; top:0; left:0; z-index:9998;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  pointer-events:none;
  will-change:transform;
  transition:width .32s var(--ease-out), height .32s var(--ease-out),
             margin .32s var(--ease-out), opacity .2s ease;
  opacity:0;
}
.rs-cursor.is-ready{opacity:1;}
.rs-cursor.is-hidden{opacity:0;}

.rs-cursor i{
  position:absolute; width:9px; height:9px; display:block;
  border:1.5px solid var(--text);
  transition:inset .32s var(--ease-out), width .32s var(--ease-out),
             height .32s var(--ease-out), border-color .25s ease, transform .32s var(--ease-out);
}
.rs-cursor i:nth-child(1){inset:0 auto auto 0;  border-right:0; border-bottom:0;}
.rs-cursor i:nth-child(2){inset:0 0 auto auto;  border-left:0;  border-bottom:0;}
.rs-cursor i:nth-child(3){inset:auto auto 0 0;  border-right:0; border-top:0;}
.rs-cursor i:nth-child(4){inset:auto 0 0 auto;  border-left:0;  border-top:0;}

/* centre dot — the "focus point" */
.rs-cursor u{
  position:absolute; left:50%; top:50%; width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px; background:var(--red); border-radius:50%;
  transition:width .3s var(--ease-out), height .3s var(--ease-out),
             margin .3s var(--ease-out), opacity .25s ease;
}

/* the label under the reticle: OPEN / PLAY / CALL … */
.rs-cursor b{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,10px);
  margin-top:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text); white-space:nowrap;
  opacity:0; transition:opacity .2s ease, transform .3s var(--ease-out);
  font-weight:400;
}

/* --- state: over a link or button --- */
.rs-cursor.is-link{width:56px; height:56px; margin:-28px 0 0 -28px;}
.rs-cursor.is-link i{width:13px; height:13px; border-color:var(--red);}
.rs-cursor.is-link u{width:5px; height:5px; margin:-2.5px 0 0 -2.5px;}

/* --- state: locked on to a media card --- */
.rs-cursor.is-lock{width:80px; height:80px; margin:-40px 0 0 -40px;}
.rs-cursor.is-lock i{width:18px; height:18px; border-color:var(--amber); border-width:2px;}
.rs-cursor.is-lock u{width:0; height:0; margin:0;}

/* --- state: label showing --- */
.rs-cursor.has-label b{opacity:1; transform:translate(-50%,0);}

/* --- state: mouse pressed = shutter closing --- */
.rs-cursor.is-down i{transform:scale(.55);}
.rs-cursor.is-down u{width:9px; height:9px; margin:-4.5px 0 0 -4.5px;}

/* --- state: over text you can select --- */
.rs-cursor.is-text{width:2px; height:26px; margin:-13px 0 0 -1px;}
.rs-cursor.is-text i{opacity:0;}
.rs-cursor.is-text u{width:2px; height:26px; margin:-13px 0 0 -1px; border-radius:0;}

/* soft trailing ring that lags behind the reticle */
.rs-ring{
  position:fixed; top:0; left:0; z-index:9997;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border:1px solid var(--line-strong); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .3s ease, width .4s var(--ease-out), height .4s var(--ease-out),
             margin .4s var(--ease-out), border-color .3s ease;
  will-change:transform;
}
.rs-ring.is-ready{opacity:.75;}
.rs-ring.is-link{width:74px; height:74px; margin:-37px 0 0 -37px; border-color:var(--gate-glow);}
.rs-ring.is-lock{opacity:0;}

@media (hover:none),(pointer:coarse){
  .rs-cursor,.rs-ring{display:none !important;}
  .cursor-on, .cursor-on *{cursor:auto;}
}

/* ============================================================
   2. PAGE LOAD — the gate opens
   ============================================================ */
.rs-gate{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  display:grid; grid-template-rows:1fr 1fr;
}
.rs-gate span{
  background:var(--bg); width:100%; height:100%;
  transform-origin:center;
  transition:transform .6s var(--ease-gate);
}
.rs-gate span:first-child{transform-origin:top;}
.rs-gate span:last-child{transform-origin:bottom;}
.rs-gate.is-open span:first-child{transform:scaleY(0); transform-origin:top;}
.rs-gate.is-open span:last-child{transform:scaleY(0); transform-origin:bottom;}
.rs-gate.is-done{display:none;}
.rs-gate-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--text-faint);
  z-index:2; transition:opacity .3s ease;
}
.rs-gate.is-open .rs-gate-mark{opacity:0;}

/* leaving the page: wipe back in from the edges */
.rs-gate.is-closing{display:grid;}
.rs-gate.is-closing span{transform:scaleY(1); transition-duration:.4s;}
.rs-gate.is-closing .rs-gate-mark{opacity:1; transition-delay:.2s;}

/* ============================================================
   3. SCROLL REVEALS — shutter wipe, not just a fade
   ============================================================ */
[data-rs]{will-change:transform,opacity,clip-path;}

[data-rs="up"]{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
[data-rs="up"].rs-in{opacity:1; transform:none;}

[data-rs="wipe"]{clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease-gate);}
[data-rs="wipe"].rs-in{clip-path:inset(0 0 0 0);}

[data-rs="iris"]{clip-path:inset(12% 12% 12% 12%); opacity:0;
  transition:clip-path 1s var(--ease-gate), opacity .6s ease;}
[data-rs="iris"].rs-in{clip-path:inset(0 0 0 0); opacity:1;}

[data-rs="slide"]{opacity:0; transform:translateX(-26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
[data-rs="slide"].rs-in{opacity:1; transform:none;}

/* stagger children */
[data-rs-stagger] > *{opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
[data-rs-stagger].rs-in > *{opacity:1; transform:none;}

/* ============================================================
   4. HEADLINE MORPH — type resolving out of timecode
   ============================================================ */
.rs-morph{display:inline-block;}
.rs-morph .rs-char{
  display:inline-block;
  transform:translateY(.42em) rotateX(-55deg);
  opacity:0;
  transition:transform .55s var(--ease-out), opacity .4s ease;
}
.rs-morph.rs-in .rs-char{transform:none; opacity:1;}
.rs-scramble{font-variant-numeric:tabular-nums;}

/* ============================================================
   5. MORPHING AMBIENT SHAPE
   A slow liquid blob behind headings — the only purely
   decorative element on the page, kept very low contrast.
   ============================================================ */
.rs-blob{
  position:absolute; z-index:0; pointer-events:none;
  width:min(52vw,640px); aspect-ratio:1;
  opacity:.5;
  filter:blur(8px);
}
.rs-blob path{transition:fill 1s ease;}
.rs-blob-wrap{position:relative;}
.rs-blob-wrap > *:not(.rs-blob){position:relative; z-index:1;}

/* ============================================================
   6. MARQUEE — a running filmstrip of real work
   ============================================================ */
.rs-marquee{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; background:var(--bg-alt);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rs-marquee-track{display:flex; gap:14px; width:max-content; animation:rsSlide 46s linear infinite;}
.rs-marquee:hover .rs-marquee-track{animation-play-state:paused;}
.rs-marquee-track img{
  height:120px; width:auto; object-fit:cover; flex:0 0 auto;
  filter:grayscale(1) contrast(1.05); opacity:.55;
  transition:filter .4s ease, opacity .4s ease, transform .4s var(--ease-out);
}
.rs-marquee-track img:hover{filter:none; opacity:1; transform:scale(1.04);}
@keyframes rsSlide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* a text version of the same idea, for the big statement band */
.rs-ticker{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; background:var(--bg);
}
.rs-ticker-track{display:flex; gap:44px; width:max-content; animation:rsSlide 34s linear infinite;}
.rs-ticker-track span{
  font-family:var(--display); font-size:clamp(28px,4.4vw,52px);
  text-transform:uppercase; letter-spacing:.02em; color:transparent;
  -webkit-text-stroke:1px var(--line-strong); white-space:nowrap;
  transition:color .35s ease, -webkit-text-stroke-color .35s ease;
}
.rs-ticker-track span:nth-child(even){color:var(--text-faint); -webkit-text-stroke:0;}
.rs-ticker:hover .rs-ticker-track span{color:var(--red); -webkit-text-stroke-color:var(--red);}

/* ============================================================
   7. HOVER MICRO-INTERACTIONS
   ============================================================ */
/* magnetic buttons — JS nudges them toward the pointer */
.rs-magnet{will-change:transform; transition:transform .35s var(--ease-out);}

/* buttons fill from the left instead of just changing colour.
   Done with a background-image wipe so the label always stays on top. */
.btn{position:relative; overflow:hidden; z-index:0; background-repeat:no-repeat;}
.btn-ghost{
  background-image:linear-gradient(90deg,var(--red),var(--red));
  background-size:0% 100%; background-position:left center;
  transition:background-size .42s var(--ease-gate), color .3s ease,
             border-color .3s ease, transform .18s ease;
}
.btn-ghost:hover{background-size:100% 100%; color:#fff; border-color:var(--red);}
.btn-primary{
  background-image:linear-gradient(90deg,#ff5636,#ff5636);
  background-size:0% 100%; background-position:left center;
  transition:background-size .42s var(--ease-gate), transform .18s ease;
}
.btn-primary:hover{background-size:100% 100%;}

/* service cards: the number slides, the image irises open */
.filmstrip .reel-card{
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), background .4s ease;
}
.reel-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-gate);
}
.reel-card:hover::after{transform:scaleX(1);}
.reel-card:hover{background:var(--bg-alt);}
.reel-num{transition:transform .4s var(--ease-out), color .3s ease;}
.reel-card:hover .reel-num{transform:translateY(-2px); color:var(--amber);}

/* process rows: the whole row shifts and the index turns red */
.process-list .process-row{
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
             padding-left .4s var(--ease-out), background .35s ease;
}
.process-row:hover{padding-left:14px; background:linear-gradient(90deg,rgba(232,68,42,.07),transparent 60%);}
.process-row:hover .idx{color:var(--red);}
.process-row .idx{transition:color .3s ease;}

.filter-row .chip{
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
             background .18s ease, color .18s ease, border-color .18s ease;
}

/* portfolio cards get a corner-bracket "focus" frame on hover */
.pf-card::after{
  content:""; position:absolute; inset:10px; z-index:2; pointer-events:none;
  border:1px solid rgba(242,239,233,.55);
  clip-path:polygon(0 0,22px 0,22px 1px,1px 1px,1px 22px,0 22px,
                    0 100%,22px 100%,22px calc(100% - 1px),1px calc(100% - 1px),1px calc(100% - 22px),0 calc(100% - 22px),
                    100% 0,calc(100% - 22px) 0,calc(100% - 22px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) 22px,100% 22px,
                    100% 100%,calc(100% - 22px) 100%,calc(100% - 22px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 22px),100% calc(100% - 22px));
  opacity:0; transform:scale(1.05);
  transition:opacity .35s ease, transform .45s var(--ease-out);
}
.pf-card:hover::after{opacity:1; transform:scale(1);}
.pf-overlay{transform:translateY(8px); opacity:.92; transition:transform .4s var(--ease-out), opacity .3s ease;}
.pf-card:hover .pf-overlay{transform:none; opacity:1;}
@media (hover:none),(pointer:coarse){
  .pf-overlay{transform:none; opacity:1;}
  .pf-card::after{display:none;}
}

/* nav links get an underline that wipes in */
.nav-links a{position:relative;}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-gate);
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}

/* the header condenses once you start scrolling */
header.site-nav{transition:height .35s var(--ease-out), background .35s ease, border-color .35s ease;}
header.site-nav.is-stuck{background:rgba(20,19,17,.94);}
header.site-nav.is-stuck .nav-row{height:60px;}
.nav-row{transition:height .35s var(--ease-out);}

/* thin scroll progress bar sitting under the header */
.rs-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:600;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  will-change:transform;
}

/* ============================================================
   8. STAT COUNTERS + FIGURE FRAMES
   ============================================================ */
.stat strong{font-variant-numeric:tabular-nums;}
.rs-figure{position:relative; overflow:hidden;}
.rs-figure img,.rs-figure video{transition:transform .8s var(--ease-out), filter .6s ease;}
.rs-figure:hover img,.rs-figure:hover video{transform:scale(1.05);}
.rs-figure::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);
}

/* ============================================================
   9. HERO — ambient loop + scan line + parallax hook
   ============================================================ */
.hero-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) contrast(1.06);
  opacity:0; transition:opacity 1.2s ease;
}
.hero-bg video.is-live{opacity:1;}
.hero-bg{will-change:transform;}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.35; mix-blend-mode:multiply;
}
.hero-title{perspective:600px;}

/* a small vertical "scroll" cue at the bottom of the hero */
.rs-scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:4; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-faint);
}
.rs-scroll-cue s{display:block; width:1px; height:38px; background:linear-gradient(var(--red),transparent); text-decoration:none;
  animation:rsCue 2.2s ease-in-out infinite;}
@keyframes rsCue{0%,100%{transform:scaleY(.4); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}}

/* ============================================================
   10. WORK TILES — big visual blocks that replace paragraphs
   ============================================================ */
.rs-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){.rs-tiles{grid-template-columns:repeat(2,1fr);}}
.rs-tile{
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-card);
  display:flex; align-items:flex-end;
}
.rs-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.05); transition:filter .5s ease, transform .7s var(--ease-out);}
.rs-tile:hover img{filter:none; transform:scale(1.06);}
.rs-tile span{
  position:relative; z-index:2; padding:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.rs-tile::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%);}

/* ============================================================
   11. REDUCED MOTION
   Everything above degrades to "just show it".
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rs-cursor,.rs-ring{display:none !important;}
  .cursor-on,.cursor-on *{cursor:auto !important;}
  [data-rs],[data-rs-stagger] > *{opacity:1 !important; transform:none !important; clip-path:none !important;}
  .rs-morph .rs-char{opacity:1 !important; transform:none !important;}
  .rs-marquee-track,.rs-ticker-track{animation:none !important;}
  .rs-scroll-cue s{animation:none !important;}
  .rs-gate{display:none !important;}
}