/* GWRN Studio — "live" layer for index-v2.html. Loads after styles.css; delete this file + live.js to revert. */

/* Atmosphere: warm light fields, cursor spotlight, column lines, film grain */
body{background:var(--paper-1)}
main,.footer,.skip{position:relative;z-index:1}
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.atmos__glow--a{width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:radial-gradient(closest-side,rgba(194,184,163,.30),rgba(194,184,163,0));animation:drift-a 38s ease-in-out infinite alternate}
.atmos__glow--b{width:54vmax;height:54vmax;right:-20vmax;top:30vh;background:radial-gradient(closest-side,rgba(242,106,69,.22),rgba(242,106,69,0));animation:drift-b 46s ease-in-out infinite alternate}
.atmos__glow--c{width:48vmax;height:48vmax;left:20vw;bottom:-30vmax;background:radial-gradient(closest-side,rgba(143,133,114,.28),rgba(143,133,114,0));animation:drift-c 52s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(22vw,18vh) scale(1.15)}}
@keyframes drift-b{to{transform:translate(-26vw,-22vh) scale(.9)}}
@keyframes drift-c{to{transform:translate(-14vw,-26vh) scale(1.2)}}
.atmos__spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(closest-side,rgba(241,234,226,.075),rgba(242,106,69,.04) 45%,transparent);transform:translate3d(var(--mx,50vw),var(--my,40vh),0);opacity:0;transition:opacity 600ms var(--ease)}
.has-pointer .atmos__spot{opacity:1}
.atmos__cols{position:absolute;inset:0 var(--margin);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.atmos__cols span{border-left:1px solid rgba(241,234,226,.035)}
.atmos__cols span:last-child{border-right:1px solid rgba(241,234,226,.035)}
.atmos__grain{position:absolute;inset:-100%;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (max-width:760px){.atmos__cols{grid-template-columns:repeat(4,minmax(0,1fr))}.atmos__cols span:nth-child(n+5){display:none}.atmos__glow{filter:blur(60px)}}

/* Sections become translucent so the atmosphere reads through */
main>.section{border-top-color:rgba(241,234,226,.09)}
.footer.inverse{background:rgba(17,16,13,.82);backdrop-filter:blur(6px)}
.footer__bar{background:transparent}

/* Brand grid: border-drawn so tiles can be transparent */
.brands__grid{background:none;gap:0}
.bcell{background:transparent;border-bottom:1px solid var(--ink-900);border-right:1px solid var(--ink-900)}
.bcell:nth-child(2),.bcell:nth-child(6){border-right:0}
.bcell:nth-child(n+3){border-bottom:0}
.bcell:hover{background:rgba(241,234,226,.045)}
@media (max-width:760px){
  .bcell:nth-child(1),.bcell:nth-child(2),.bcell:nth-child(4),.bcell:nth-child(6){border-right:0}
  .bcell:nth-child(-n+4){border-bottom:1px solid var(--ink-900)}
}

/* ---------- Text motion ---------- */
.lw{display:inline-block;white-space:nowrap}
.lc{display:inline-block;transition:color 260ms var(--ease-out),transform 420ms var(--ease)}

/* Hero: letters rise inside each clipped line */
.js .hero__title .line>span{transform:none;transition:none}
.live .hero__title .lc{transform:translateY(105%);transition:transform 900ms var(--ease),color 260ms var(--ease-out);transition-delay:calc(var(--i)*22ms + var(--d,0ms))}
.live .hero__title.v-in .lc{transform:translateY(var(--lift,0))}
.hero__title .lc.is-near{color:var(--taupe-700)}
.hero__ctas{opacity:0;transform:translateY(12px);transition:opacity 700ms var(--ease) 900ms,transform 700ms var(--ease) 900ms}
.hero__title.v-in~.hero__ctas{opacity:1;transform:none}
.hero .header__in{animation:fade-down 800ms var(--ease) both}
@keyframes fade-down{from{opacity:0;transform:translateY(-10px)}}

/* Headings: words slide up from a mask, staggered */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.rw>span{display:inline-block;transform:translateY(110%);transition:transform 900ms var(--ease);transition-delay:calc(var(--i)*55ms)}
.v-in .rw>span{transform:none}

/* POV statement: words light up as it scrolls through the viewport */
.pov__statement .sw{color:var(--ink-500);transition:color 300ms var(--ease-out)}
.pov__statement .sw.lit{color:var(--ink-900)}

/* Lists: staggered rise */
.rise{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease),transform 800ms var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rise.v-in{opacity:1;transform:none}
.process__list .idx{display:inline-block;transition:color 300ms var(--ease-out),transform 500ms var(--ease)}
.process__list li:hover .idx{color:var(--signal-600);transform:translateX(6px)}
.process__list li h3{transition:transform 500ms var(--ease)}
.process__list li:hover h3{transform:translateX(6px)}

/* Brand names: scramble on hover (JS), soft lift */
.bcell__name{font-variant-numeric:tabular-nums}

/* Contact heading: gentle breathing accent */
#contact-title .ital{background:linear-gradient(90deg,var(--taupe-700),var(--signal-600),var(--taupe-700));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* Footer mark: letters spread as you reach the bottom */
.footer__mark{letter-spacing:calc(-.12em + var(--spread,0)*.06em);transition:letter-spacing 120ms linear}

@media (prefers-reduced-motion:reduce){
  .atmos__glow,.atmos__grain,#contact-title .ital,.hero .header__in{animation:none!important}
  .atmos__spot{display:none}
  .live .hero__title .lc,.rw>span,.rise{transform:none!important;opacity:1!important}
  .hero__ctas{opacity:1;transform:none}
  .pov__statement .sw{color:var(--ink-900)}
}
@media (hover:none){.atmos__spot{display:none}}