/* home.css — homepage-specific: preloader, edge-fade, hero+3D, futureband/reel, statement, solutions, projects dial, workall, instagram */

/* ============================================================
   preloader — ethereal phrase swap (covers the heavy 3D/font load)
   ============================================================ */
/* ============================================================
   PRELOADER
============================================================ */

.preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    overflow:hidden;

    background:
        radial-gradient(120% 90% at 70% 112%, rgba(220,168,92,.18), transparent 55%),
        radial-gradient(80% 70% at 12% 4%, rgba(22,49,58,.26), transparent 60%),
        linear-gradient(180deg,var(--ink-2),var(--ink) 75%);

    transition:
        opacity 1s var(--ease),
        filter 1.1s var(--ease),
        visibility 1.1s;
}

.preloader.is-done{
    opacity:0;
    filter:blur(18px);
    visibility:hidden;
    pointer-events:none;
}

/* ============================================================
   Grain
============================================================ */

.pre__grain{
    position:absolute;
    inset:-6%;
    pointer-events:none;
    opacity:.5;
    mix-blend-mode:overlay;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    animation:preGrain .9s steps(4) infinite;
}

@keyframes preGrain{
    0%{transform:translate(0,0);}
    25%{transform:translate(-2%,1%);}
    50%{transform:translate(1.5%,-2%);}
    75%{transform:translate(-1%,2%);}
    100%{transform:translate(0,0);}
}

/* ============================================================
   Logo
============================================================ */

.pre__mark{

    position:relative;

    /* Más compacto */
    width:clamp(210px,40vw,300px);

    aspect-ratio:1;

    display:grid;
    place-items:center;

    opacity:0;

    animation:
        preMarkIn 1.1s var(--ease-out) .2s forwards;
}

@keyframes preMarkIn{

    from{
        opacity:0;
        filter:blur(16px);
        transform:scale(1.05);
    }

    to{
        opacity:1;
        filter:blur(0);
        transform:none;
    }

}

/* ============================================================
   Circular Text
============================================================ */

.pre__ring{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    animation:preSpin 24s linear infinite;
    will-change:transform;

}

.pre__ring text{

    font-family:var(--font-ui);
    font-weight:500;

    /* Un poco más pequeño */
    font-size:0.9em;

    /* Mucho más elegante */
    letter-spacing:.22em;

    text-transform:uppercase;

    fill:var(--sand-dim);

}

@keyframes preSpin{

    to{
        transform:rotate(360deg);
    }

}

/* ============================================================
   Isotipo
============================================================ */

.pre__iso{

    /* Antes 58 / 92 */
    width:clamp(48px,7.5vw,76px);

    height:auto;

    animation:
        prePulse 3.4s var(--ease) infinite;

}

@keyframes prePulse{

    0%,100%{
        filter:drop-shadow(0 0 12px rgba(220,168,92,.28));
        transform:scale(1);
    }

    50%{
        filter:drop-shadow(0 0 26px rgba(220,168,92,.52));
        transform:scale(1.045);
    }

}

/* ============================================================
   Progress Bar
============================================================ */

.pre__bar{

    position:absolute;

    left:50%;

    bottom:clamp(2.6rem,9vh,5rem);

    transform:translateX(-50%);

    width:min(240px,52vw);

    height:1px;

    background:var(--line-soft);

    overflow:hidden;

}

.pre__bar i{

    position:absolute;

    inset:0;

    transform-origin:0 50%;

    transform:scaleX(0);

    background:linear-gradient(
        90deg,
        var(--bronze),
        var(--amber),
        var(--gold)
    );

    animation:
        preBar 3s var(--ease) .2s forwards;

}

@keyframes preBar{

    0%{
        transform:scaleX(0);
    }

    82%{
        transform:scaleX(.9);
    }

    100%{
        transform:scaleX(.95);
    }

}

.preloader.is-done .pre__bar i{

    transform:scaleX(1);

    transition:transform .5s var(--ease);

}

/* ============================================================
   Utilities
============================================================ */

.no-js .preloader{
    display:none;
}

@media (prefers-reduced-motion:reduce){

    .pre__mark{
        animation:none;
        opacity:1;
        filter:none;
        transform:none;
    }

    .pre__ring,
    .pre__iso,
    .pre__grain{
        animation:none;
    }

    .pre__bar i{
        animation:none;
        transform:scaleX(1);
    }

}

/* immersive progressive blur + fade on top/bottom edges */
.edge-fade{position:fixed;left:0;right:0;z-index:7000;pointer-events:none}
.edge-fade--top{top:0;height:clamp(76px,13vh,165px)}
.edge-fade--bottom{bottom:0;height:clamp(130px,22vh,280px)}
.edge-fade__blur,.edge-fade__tint{position:absolute;inset:0}
.edge-fade--top .edge-fade__blur--1{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 44%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 44%,transparent 100%)}
.edge-fade--top .edge-fade__blur--2{backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 20%,transparent 70%);mask:linear-gradient(180deg,#000 0%,#000 20%,transparent 70%)}
.edge-fade--top .edge-fade__blur--3{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  -webkit-mask:linear-gradient(180deg,#000 0%,transparent 46%);mask:linear-gradient(180deg,#000 0%,transparent 46%)}
.edge-fade--top .edge-fade__tint{background:linear-gradient(180deg,var(--ink) 0%,transparent 100%)}
.edge-fade--bottom .edge-fade__blur--1{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  -webkit-mask:linear-gradient(0deg,#000 0%,#000 48%,transparent 100%);mask:linear-gradient(0deg,#000 0%,#000 48%,transparent 100%)}
.edge-fade--bottom .edge-fade__blur--2{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask:linear-gradient(0deg,#000 0%,#000 24%,transparent 74%);mask:linear-gradient(0deg,#000 0%,#000 24%,transparent 74%)}
.edge-fade--bottom .edge-fade__blur--3{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  -webkit-mask:linear-gradient(0deg,#000 0%,transparent 52%);mask:linear-gradient(0deg,#000 0%,transparent 52%)}
.edge-fade--bottom .edge-fade__tint{background:linear-gradient(0deg,var(--ink) 0%,transparent 100%)}

/* ============================================================
   HERO / intro
   ============================================================ */
/* taller intro on desktop so the next section just peeks (invites scroll); title vertically centered */
.hero{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:clamp(2rem,5vh,4rem)}
@media (max-width:760px){.hero{min-height:88svh}}
/* background project reel (cross-fading showreel over the CSS atmos fallback) */
.hero__reel{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.reel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s var(--ease)}
.reel-slide.is-active{opacity:1}
.reel-ph{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);
  animation:kenburns 24s ease-in-out infinite alternate;will-change:transform}
.reel-slide .reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes kenburns{from{transform:scale(1.06) translate(1.2%,0.4%)}to{transform:scale(1.2) translate(-2.4%,-1.8%)}}
@media (prefers-reduced-motion:reduce){.reel-ph{animation:none}}
.hero__grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 95% at 78% 112%, rgba(197,130,74,.30), transparent 55%),
    radial-gradient(80% 70% at 8% 2%, rgba(22,49,58,.42), transparent 60%),
    linear-gradient(180deg, rgba(20,15,7,.60) 0%, rgba(20,15,7,.26) 38%, rgba(20,15,7,.84) 100%)}
.hero__reelcue{display:inline-flex;align-items:center;gap:.55rem;text-align:right}
.hero__reelcue .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(197,130,74,.6);animation:pulse 2.6s infinite}
@media (prefers-reduced-motion:reduce){.hero__reelcue .dot{animation:none}}
.hero__cta{margin-top:clamp(1.1rem,2.5vh,1.6rem)}
/* atmosphere: golden hour dominant, petrol haze as cool edge */
.hero__atmos{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(130% 95% at 70% 112%, rgba(220,168,92,.55), rgba(220,168,92,0) 55%),
    radial-gradient(120% 100% at 35% 120%, rgba(197,130,74,.45), rgba(197,130,74,0) 52%),
    radial-gradient(85% 65% at 10% 6%, rgba(22,49,58,.55), rgba(22,49,58,0) 60%),
    radial-gradient(70% 55% at 96% 4%, rgba(111,138,135,.28), rgba(111,138,135,0) 60%),
    linear-gradient(180deg,var(--ink-2),var(--ink) 72%);
}
.hero__atmos::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(closest-side, rgba(156,123,67,.30), transparent 70%);
  filter:blur(50px);transform:translate(-6%, 4%);will-change:transform}
.hero__atmos::after{content:"";position:absolute;inset:-25%;
  background:radial-gradient(closest-side, rgba(220,168,92,.40), transparent 66%);
  filter:blur(70px);transform:translate(30%, 42%);will-change:transform}
.hero__haze{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(23,19,9,.30) 0%, rgba(23,19,9,0) 28%, rgba(23,19,9,.50) 100%)}
.hero__strata{position:absolute;left:0;right:0;bottom:18%;z-index:1;height:1px;background:var(--line);opacity:.55}
.hero__strata::before,.hero__strata::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-soft)}
.hero__strata::before{top:-44px}.hero__strata::after{top:44px}

.hero__content{position:relative;z-index:3;text-align:center}
.hero__title{font-family:var(--font-display);font-weight:300;letter-spacing:-.035em;
  font-size:clamp(3rem,11vw,11.5rem);line-height:.92;color:var(--sand)}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:block;transform:translateY(102%)}
.js .hero__title .line > span{will-change:transform}
.hero__title .word-amber{color:var(--amber-soft);font-weight:300}
.hero__title .word-steel{color:var(--steel)}
/* hero headline hierarchy: big wordmark + small uppercase tagline */
.hero__title-sub{display:inline-block;font-family:var(--font-ui);font-weight:500;
  font-size:clamp(.8rem,1.7vw,1.45rem);letter-spacing:.22em;text-transform:uppercase;color:var(--sand-dim);line-height:1.3}
.hero__title .line:nth-child(2){margin-top:clamp(.7rem,1.8vh,1.25rem)}
/* hero logo (replaces the big "together" wordmark) */
.hero__logo{display:inline-block}
.hero__logo-svg{display:block;width:min(56vw,520px);height:auto;color:var(--sand)}

/* ============================================================
   FUTURE band — wide work-reel video bg + statement
   ============================================================ */
.futureband{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.futureband__reel{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.futureband__reel .reel-ph{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);
  animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
.futureband__reel .reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.futureband__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,11,5,.74),rgba(14,11,5,.4) 42%,rgba(14,11,5,.88)),
    radial-gradient(80% 70% at 82% 112%,rgba(197,130,74,.22),transparent 60%)}
.futureband__content{position:relative;z-index:2;max-width:1800px;transition:opacity .5s var(--ease)}
.futureband__grade{transition:opacity .6s var(--ease)}
.futureband__watch{margin-top:clamp(1.4rem,3.5vh,2.4rem)}
/* watching state: hide the text, lift the grade so the video reads clearly */
.futureband.is-playing .futureband__content{opacity:0;pointer-events:none}
.futureband.is-playing .futureband__grade{opacity:.16}
.futureband__controls{position:absolute;z-index:5;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);transform:translateX(-50%);
  width:min(640px,90vw);display:flex;align-items:center;gap:.7rem;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.futureband.is-playing .futureband__controls{opacity:1;pointer-events:auto}
.reel-ctrl{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(20,15,7,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--sand);font-size:.92rem;cursor:pointer;
  display:grid;place-items:center;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.reel-ctrl:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.reel-ctrl svg{width:18px;height:18px;display:block}
/* seek bar */
.reel-seek{flex:1 1 auto;height:34px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.reel-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(var(--amber),var(--amber)) no-repeat,rgba(236,220,190,.22);background-size:var(--seek,0%) 100%}
.reel-seek::-moz-range-track{height:3px;border-radius:3px;background:rgba(236,220,190,.22)}
.reel-seek::-moz-range-progress{height:3px;border-radius:3px;background:var(--amber)}
.reel-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--sand);margin-top:-5px;box-shadow:0 0 0 1px rgba(20,15,7,.4)}
.reel-seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--sand)}
/* N27 Bold (700) as a typographic accent for weight variety */
.futureband__lead .amber{font-weight:700}
.dissolve-line--accent{font-weight:700}
.ig__title .rotator--cta .rotator__item{font-weight:700}
.statement .rotator__item{font-weight:700}
.futureband__lead{
    font-family:var(--font-display);
    font-weight:300;
    font-size:clamp(1.6rem,4vw,3.8rem);
    line-height:1.05;
    letter-spacing:-.02em;
    color:var(--sand);
}
.futureband__lead .amber{
    font-size:1.2em !important;
    line-height:1.1;
}
.futureband__sig{display:inline-block;margin-top:clamp(1.6rem,4vh,2.8rem);font-family:var(--font-ui);font-weight:500;
  font-size:clamp(.7rem,1.1vw,.92rem);letter-spacing:.28em;text-transform:uppercase;color:var(--amber-soft)}
/* second tagline under the reel lead */
.futureband__tag{margin-top:clamp(1rem,2.6vh,1.7rem);font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,2vw,1.9rem);line-height:1.1;letter-spacing:-.01em;color:var(--amber-soft)}
/* rotating "Design Right Things · Design Things Right" badge — floats in the corner */
.futureband__ring{position:absolute;right:clamp(1.4rem,4vw,3.6rem);bottom:clamp(1.6rem,5vh,3.4rem);z-index:2;
  width:clamp(94px,10vw,126px);height:clamp(94px,10vw,126px);opacity:.92;transition:opacity .5s var(--ease)}
.futureband.is-playing .futureband__ring{opacity:0;pointer-events:none}
.futureband__ring svg{width:100%;height:100%;color:var(--amber-soft);animation:fbSpin 26s linear infinite;transform-origin:center}
.futureband__ring text{fill:currentColor;font-family:var(--font-ui);font-weight:500;font-size:12.3px;letter-spacing:.095em;text-transform:uppercase}
@media (max-width:600px){.futureband__ring{width:88px;height:88px;right:1.1rem;bottom:1.2rem}}
@keyframes fbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.futureband__ring svg{animation:none}}

.hero__foot{position:absolute;left:0;right:0;bottom:clamp(1.6rem,4.5vh,3rem);z-index:3;display:flex;flex-direction:column;gap:1.1rem;align-items:center;justify-content:center}
.hero__lede{max-width:34ch;font-size:clamp(1.02rem,1.5vw,1.3rem);color:var(--sand-dim);font-weight:300}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero__meta{display:flex;gap:2.2rem;align-items:flex-end}
.hero__meta .m{font-family:var(--font-ui);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.hero__meta .m b{display:block;color:var(--sand);font-weight:500}
.scrollcue{display:flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);display:block;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}40%{transform:scaleY(1);transform-origin:0 0}60%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
@media (prefers-reduced-motion:reduce){.scrollcue i{animation:none}}

/* masked load reveal (CSS, screenshot-safe) */
.js .hero__title .line > span{animation:rise 1.15s var(--ease-out) forwards}
.js .hero__title .line:nth-child(1) > span{animation-delay:.25s}
.js .hero__title .line:nth-child(2) > span{animation-delay:.37s}
.js .hero__title .line:nth-child(3) > span{animation-delay:.49s}
@keyframes rise{to{transform:translateY(0)}}
.no-js .hero__title .line > span{transform:none}
@media (prefers-reduced-motion:reduce){.hero__title .line > span{transform:none !important;animation:none !important}}

/* ============================================================
   HERO — 3D signature isotipo (right side, behind copy)
   ============================================================ */
.hero__object{position:absolute;inset:0;z-index:2;pointer-events:auto;opacity:.62}
.hero__object__glow{position:absolute;top:48%;left:72%;transform:translate(-50%,-50%);pointer-events:none;
  width:min(50vw,700px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(220,168,92,.26), rgba(197,130,74,.10) 50%, transparent 74%);
  filter:blur(46px);will-change:transform,opacity}
.hero__object canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
/* full-section darken + blur over the whole hero (copy stays crisp on top at z3) */
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:linear-gradient(90deg, rgba(11,8,3,.44) 0%, rgba(11,8,3,.28) 46%, rgba(11,8,3,.28) 64%, rgba(11,8,3,.38) 100%)}
/* ethereal frosted veil ON TOP of the 3D — crisp crystal core, dissolves only at the edges */
.hero__object__veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-mask:radial-gradient(74% 70% at 56% 46%, transparent 0%, transparent 48%, rgba(0,0,0,.55) 74%, #000 100%);
  mask:radial-gradient(74% 70% at 56% 46%, transparent 0%, transparent 48%, rgba(0,0,0,.55) 74%, #000 100%)}
@media (prefers-reduced-motion:reduce){.hero__object__glow{filter:blur(40px)}}
@media (max-width:860px){
  .hero__object{display:none}
}

/* ============================================================
   statement
   ============================================================ */
.statement{border-block:1px solid var(--line-soft);padding-block:clamp(3.5rem,9vh,7rem)}
.statement__eyebrow{display:block;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.statement__lead{font-family:var(--font-display);font-weight:300;font-size:clamp(3rem,11vw,9rem);line-height:.86;letter-spacing:-.04em;color:var(--sand);margin-bottom:clamp(1.4rem,4vh,2.4rem)}
.statement__line{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.16;letter-spacing:-.02em;max-width:22ch}
.statement .fill .w{color:rgba(168,150,122,.26);transition:color .7s var(--ease)}
.statement .fill.is-lit .w{color:var(--sand)}
.rotator{position:relative;display:inline-block;vertical-align:bottom;color:var(--amber-soft)}
.rotator__item{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;filter:blur(18px);transform:scale(1.06);
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform 1s var(--ease-out)}
.rotator__item.is-active{position:relative;opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
  .statement .fill .w{color:var(--sand)}
  .rotator__item{transition:none}
}

/* ============================================================
   SOLUTIONS — hover-reveal index
   ============================================================ */
.solutions{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.sol-list{border-top:1px solid var(--line)}
.sol-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;
  border-bottom:1px solid var(--line);padding:clamp(1.6rem,4vh,2.6rem) 0;transition:padding .5s var(--ease)}
.sol-row__no{font-family:var(--font-ui);font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--muted);transition:color .5s var(--ease)}
.sol-row__name{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--sand);transition:transform .55s var(--ease),color .55s var(--ease)}
.sol-intro{max-width:52ch;margin-inline:auto;text-align:center;text-wrap:balance;
  font-family:var(--font-ui);font-weight:400;font-size:clamp(.82rem,1.15vw,.98rem);line-height:1.6;letter-spacing:.01em;color:var(--muted)}
.sol-intro em{font-style:normal;font-weight:500;color:var(--sand)}
.sol-intro b{font-weight:500;color:var(--amber-soft)}
.workall{position:relative;z-index:3;display:flex;justify-content:center;margin-top:clamp(2.4rem,6vh,4rem)}
.workall__link{font-family:var(--font-ui);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding:.7rem .2rem;border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)}
.workall__link span{display:inline-block;transition:transform .4s var(--ease)}
.workall__link:hover{color:var(--sand);border-bottom-color:var(--line)}
.workall__link:hover span{transform:translateX(5px)}
.sol-row__desc{font-size:clamp(.9rem,1vw,1rem);color:var(--muted);max-width:36ch;justify-self:end;text-align:right;transition:color .5s var(--ease)}
.sol-row__arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--sand);
  transition:transform .55s var(--ease-out),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
@media (hover:hover){
  .sol-row:hover{padding-inline:1.4rem}
  .sol-row:hover .sol-row__no{color:var(--amber-soft)}
  .sol-row:hover .sol-row__name{transform:translateX(.6rem);color:var(--amber-soft)}
  .sol-row:hover .sol-row__desc{color:var(--sand-dim)}
  .sol-row:hover .sol-row__arrow{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:rotate(-45deg)}
}
.sol-preview{position:fixed;top:0;left:0;width:min(26vw,300px);aspect-ratio:4/5;z-index:60;pointer-events:none;
  border-radius:6px;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);will-change:transform,opacity;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.sol-preview__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s var(--ease)}
.sol-preview__img.is-on{opacity:.7}
@media (max-width:760px){
  .sol-row{grid-template-columns:auto 1fr;row-gap:.75rem}
  .sol-row__desc{grid-column:1/-1;justify-self:start;text-align:left;max-width:48ch}
  .sol-row__arrow{display:none}
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{background:var(--ink-2)}
/* manifesto: dust/water dissolve-on-hover */
.dissolve-sec{border-top:1px solid var(--line-soft);padding-block:clamp(2.6rem,7vh,4.5rem)}
.dissolve-stmt{font-family:var(--font-display);font-weight:300;font-size:clamp(.95rem,1.7vw,1.35rem);line-height:1.4;letter-spacing:-.01em;color:var(--muted);max-width:60ch;margin:0 auto;text-align:center}
.dissolve-line{display:block}
.dissolve-line--accent{color:var(--amber-soft);font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.2;letter-spacing:-.02em;
  margin-top:clamp(.5rem,1.4vh,.9rem);text-shadow:0 0 18px rgba(197,130,74,.34),0 0 44px rgba(197,130,74,.16);
  animation:glowPulse 4.5s var(--ease) infinite}
@keyframes glowPulse{
  0%,100%{text-shadow:0 0 20px rgba(197,130,74,.30),0 0 48px rgba(197,130,74,.13)}
  50%{text-shadow:0 0 36px rgba(220,168,92,.58),0 0 86px rgba(197,130,74,.30)}
}
@media (prefers-reduced-motion:reduce){.dissolve-line--accent{animation:none}}
.dissolve-line .dl-word{display:inline-block;white-space:nowrap}
.dissolve-line .ch{display:inline-block;white-space:pre;will-change:transform,filter,opacity;
  transition:transform .6s var(--ease-out),opacity .6s var(--ease),filter .6s var(--ease);transition-delay:0ms}
@media (hover:hover){
  .dissolve-line:hover .ch{opacity:0;filter:blur(12px);
    transform:translate(var(--dx,0),var(--dy,-24px)) rotate(var(--r,0)) scale(1.55);
    transition-timing-function:cubic-bezier(.36,0,.66,-0.2);transition-delay:var(--d,0ms)}
}
@media (prefers-reduced-motion:reduce){
  .dissolve-line .ch,.dissolve-line:hover .ch{transition:none;opacity:1;filter:none;transform:none}
}

/* project stage: full-bleed image · infinite logo dial (left) · description (right) */
.projects{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--ink);padding-block:clamp(5rem,12vh,8rem)}
.proj-stage__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:opacity .7s var(--ease)}
.proj-stage__vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.proj-stage__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,15,7,.92) 0%,rgba(20,15,7,.32) 24%,rgba(20,15,7,.17) 46%,rgba(20,15,7,.62) 66%,rgba(20,15,7,.97) 100%),
    linear-gradient(180deg,rgba(20,15,7,.72),transparent 26%,transparent 64%,rgba(20,15,7,.86))}
/* narrow screens: darken the project bg more for legibility */
@media (max-width:860px){.proj-stage__scrim{background:linear-gradient(180deg,rgba(20,15,7,.82),rgba(20,15,7,.6) 38%,rgba(20,15,7,.9))}}
@media (max-width:560px){.proj-stage__scrim{background:linear-gradient(180deg,rgba(14,11,5,.9),rgba(14,11,5,.78) 40%,rgba(14,11,5,.95))}}
.proj-stage__blur{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;width:clamp(160px,28%,500px);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.proj-stage__blur--l{left:0;-webkit-mask:linear-gradient(90deg,#000 0%,#000 32%,transparent 100%);mask:linear-gradient(90deg,#000 0%,#000 32%,transparent 100%)}
.proj-stage__blur--r{right:0;-webkit-mask:linear-gradient(270deg,#000 0%,#000 32%,transparent 100%);mask:linear-gradient(270deg,#000 0%,#000 32%,transparent 100%)}
.proj-stage__head{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2rem,6vh,4rem)}
.proj-stage__head .section-title{font-size:clamp(1.8rem,4vw,3.4rem);max-width:18ch}

.proj-dial{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.proj-dial__logos{position:relative;flex:0 0 auto;width:clamp(200px,23%,360px);height:clamp(320px,52vh,560px);overflow:hidden;--item-h:64px;
  padding-left:clamp(.5rem,1.5vw,1.6rem);cursor:ns-resize;outline:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.proj-dial__track{position:absolute;left:clamp(.5rem,1.5vw,1.6rem);right:0;top:0;height:100%}
.proj-dial__item{position:absolute;left:0;top:50%;margin-top:calc(var(--item-h)/-2);display:flex;align-items:center;height:var(--item-h);
  border:0;background:none;cursor:pointer;font-family:var(--font-display);font-weight:300;font-size:clamp(1.3rem,2.4vw,2.05rem);
  letter-spacing:-.02em;color:var(--sand-dim);text-align:left;padding:0;white-space:nowrap;transform-origin:left center;will-change:transform,filter,opacity;
  transition:filter .7s var(--ease),opacity .7s var(--ease),transform .8s var(--ease-out),color .5s var(--ease)}
.proj-dial__item.is-active{color:var(--sand)}
.proj-dial__focus{position:absolute;left:clamp(.5rem,1.5vw,1.6rem);right:0;top:50%;height:var(--item-h);transform:translateY(-50%);pointer-events:none;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.proj-dial__info{flex:0 0 auto;width:clamp(220px,25%,360px);display:flex;flex-direction:column;gap:1rem;
  min-height:clamp(300px,50vh,520px);   /* reserve space so the nav arrows stay fixed regardless of copy length */
  transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.proj-dial__logo{height:clamp(20px,2.4vw,34px);width:auto;max-width:100%;object-fit:contain;display:block;pointer-events:none}
.proj-dial__info.is-swap{opacity:0;transform:translateY(10px)}
.proj-dial__cat{font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-soft)}
.proj-dial__name{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4vw,3.4rem);line-height:.98;letter-spacing:-.03em;color:var(--sand)}
.proj-dial__meta{font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-dim)}
.proj-dial__lead{font-family:var(--font-display);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.15;letter-spacing:-.01em;color:var(--sand);max-width:30ch;margin-top:.2rem}
.proj-dial__lead:empty{display:none}
.proj-dial__desc{color:var(--sand-dim);font-size:clamp(.95rem,1.05vw,1.05rem);max-width:36ch}
.proj-dial__view{margin-top:.6rem;align-self:flex-start}
.proj-dial__nav{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:1rem}
.proj-dial__count{font-family:var(--font-ui);font-weight:500;font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.proj-dial__arrows{display:flex;gap:.5rem;margin-left:auto}
.proj-dial__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--sand);
  background:rgba(20,15,7,.3);backdrop-filter:blur(4px);cursor:pointer;font-size:1.05rem;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.proj-dial__arrow:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
@media (max-width:860px){
  .projects{min-height:0;padding-block:clamp(4rem,10vh,7rem)}
  .proj-stage__blur{width:44%}
  .proj-dial{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .proj-dial__logos{width:100%;height:auto;overflow-x:auto;overflow-y:visible;padding-left:0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);scrollbar-width:none}
  .proj-dial__logos::-webkit-scrollbar{display:none}
  .proj-dial__track{position:relative;left:0;height:auto;display:flex;gap:1.4rem;padding:.2rem 0 .6rem}
  .proj-dial__item{position:relative;top:auto;margin-top:0;height:auto;filter:none !important;opacity:.4 !important;transform:none !important;font-size:1.5rem}
  .proj-dial__item.is-active{opacity:1 !important;color:var(--amber-soft)}
  .proj-dial__focus{display:none}
  .proj-dial__info{width:100%}
}
/* bento grid */
.bento-hint{font-family:var(--font-ui);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:-1rem 0 1.6rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(148px,18.5vw,224px);gap:clamp(.6rem,1.1vw,1rem);perspective:1400px}
.bento__tile{position:relative;overflow:hidden;border-radius:7px;display:block;isolation:isolate;
  border:1px solid var(--line-soft);background:var(--ink-3);font:inherit;color:inherit;text-align:left;padding:0;width:100%;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.bento__tile:hover{z-index:4;border-color:var(--line);box-shadow:0 26px 60px -28px rgba(0,0,0,.75)}
/* cursor spotlight */
.t-spot{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(220,168,92,.20), transparent 62%)}
.bento__tile:hover .t-spot{opacity:1}
/* animated registration frame */
.t-frame{position:absolute;inset:.65rem;z-index:2;pointer-events:none;opacity:0;transform:scale(1.03);transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.bento__tile:hover .t-frame{opacity:1;transform:none}
.t-frame::before,.t-frame::after{content:"";position:absolute;width:16px;height:16px;border:1px solid rgba(236,220,190,.55)}
.t-frame::before{top:0;left:0;border-right:0;border-bottom:0}
.t-frame::after{bottom:0;right:0;border-left:0;border-top:0}
/* hover hint pill (sits beside the open arrow) */
.t-hint{display:inline-flex;align-items:center;align-self:flex-end;margin-bottom:.2rem;
  font-family:var(--font-ui);font-weight:500;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  background:var(--amber);padding:.32rem .6rem;border-radius:100px;white-space:nowrap;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-out)}
.bento__tile:hover .t-hint{opacity:1;transform:none}
.t-body{align-items:flex-end}
.t-right{display:flex;align-items:center;gap:.6rem}
.bento__tile--feature{grid-column:span 3;grid-row:span 2}
.bento__tile--wide{grid-column:span 3}
.bento__tile--half{grid-column:span 2}
.t-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform 1.1s var(--ease-out);will-change:transform}
.bento__tile:hover .t-img{transform:scale(1.07)}
.t-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,9,.04) 28%,rgba(23,19,9,.80));transition:opacity .5s var(--ease)}
.bento__tile:hover .t-img::after{opacity:.9}
.t-cat{position:absolute;top:.85rem;left:.9rem;z-index:2;font-family:var(--font-ui);font-weight:500;font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sand);
  background:rgba(23,19,9,.42);backdrop-filter:blur(6px);padding:.38rem .65rem;border-radius:100px;border:1px solid var(--line)}
.t-no{position:absolute;top:.95rem;right:1rem;z-index:2;font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.1em;color:var(--sand);opacity:.66}
.t-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(.85rem,1.5vw,1.4rem);display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem}
.t-name{font-family:var(--font-display);font-weight:300;line-height:.92;letter-spacing:-.03em;color:var(--sand);font-size:clamp(1.15rem,2vw,1.8rem)}
.bento__tile--feature .t-name{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.t-open{flex:0 0 auto;width:33px;height:33px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--sand);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out)}
.bento__tile:hover .t-open{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:rotate(-45deg)}
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,42vw,210px)}
  .bento__tile--feature{grid-column:span 2;grid-row:span 2}
  .bento__tile--wide{grid-column:span 2;grid-row:span 1}
  .bento__tile--half{grid-column:span 1}
}

/* project lightbox */
.lb{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(14,11,5,.86);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lb.is-open{opacity:1;visibility:visible}
.lb__panel{position:relative;width:min(1080px,100%);max-height:88vh;display:grid;grid-template-columns:1.2fr .9fr;
  background:var(--ink-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transform:scale(.96) translateY(12px);transition:transform .55s var(--ease-out)}
.lb.is-open .lb__panel{transform:none}
.lb__media{position:relative;overflow:hidden;min-height:320px;background:var(--ink-3)}
.lb__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .35s var(--ease)}
.lb__info{padding:clamp(1.6rem,3vw,2.8rem);display:flex;flex-direction:column;gap:1.1rem;justify-content:center;transition:opacity .35s var(--ease)}
.lb__cat{font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-soft)}
.lb__name{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4vw,3.4rem);line-height:.95;letter-spacing:-.03em;color:var(--sand)}
.lb__desc{color:var(--muted);font-size:clamp(.95rem,1.1vw,1.05rem);max-width:44ch}
.lb__meta{font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-dim);line-height:1.7}
.lb__nav{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.lb__count{font-family:var(--font-ui);font-weight:500;font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.lb__arrows{display:flex;gap:.5rem;margin-left:auto}
.lb__arrow,.lb__close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--sand);
  background:transparent;font-size:1rem;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.lb__arrow:hover,.lb__close:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.lb__close{position:absolute;top:1rem;right:1rem;z-index:3}
@media (max-width:820px){
  .lb__panel{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}
  .lb__media{min-height:0;aspect-ratio:16/10}
}

/* ============================================================
   IG GALLERY
   ============================================================ */
/* instagram gallery */
.ig{padding-block:clamp(1.5rem,4vh,3rem)}
.ig__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;margin-bottom:1.75rem}
.ig__cta{text-align:center;max-width:min(94vw,64rem);margin:0 auto clamp(2.5rem,6vh,4.5rem)}
.ig__cta .index{display:block;margin-bottom:clamp(1rem,3vh,1.6rem)}
.ig__title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--sand);margin-bottom:clamp(1.4rem,3.5vh,2rem);text-align:center}
.ig__title-l1{white-space:nowrap}
.ig__title .rotator--cta{font-style:italic;color:var(--amber-soft)}
/* the "together" wordmark instead of the text, same tone (currentColor=sand) + headline size */
.ig__title-logo{display:inline-block;margin-top:clamp(.5rem,1.4vh,1rem)}
.ig__title-logo svg{display:block;height:clamp(1.5rem,3.6vw,3rem);width:auto;color:var(--sand)}
@media (max-width:768px){.ig__title-l1{white-space:normal}}
.ig__handle{display:flex;justify-content:center;align-items:center;gap:.55rem;width:100%;margin-top:clamp(1.8rem,5vh,3rem);
  font-family:var(--font-ui);font-weight:500;font-size:clamp(.8rem,1.5vw,1rem);letter-spacing:.06em;color:var(--cyan-dust)}
.ig__handle .live{width:6px;height:6px}
.ig__handle .live{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(197,130,74,.6);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(197,130,74,.5)}70%{box-shadow:0 0 0 10px rgba(197,130,74,0)}100%{box-shadow:0 0 0 0 rgba(197,130,74,0)}}
@media (prefers-reduced-motion:reduce){.ig__handle .live{animation:none}}
.ig__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1vw,.9rem)}
.ig__cell{position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px;display:block}
.ig__cell .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:sepia(.45) hue-rotate(-15deg) saturate(.8) brightness(.88);transition:transform .8s var(--ease-out),filter .55s var(--ease-out)}
.ig__cell:hover .ph{transform:scale(1.07);filter:none}
.ig__cell .ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:.7rem;
  background:linear-gradient(180deg,rgba(23,19,9,0) 45%,rgba(23,19,9,.74));opacity:0;transition:opacity .45s var(--ease)}
.ig__cell:hover .ov{opacity:1}
.ig__cell .ov span{font-family:var(--font-ui);font-weight:500;font-size:.62rem;letter-spacing:.06em;color:var(--sand);display:inline-flex;align-items:center;gap:.35rem}
@media (max-width:860px){.ig__grid{grid-template-columns:repeat(3,1fr)}}
/* instagram reel — 4:5 cards, blurred/faded edges, focus on center */
.ig__handle .marketing{color:var(--cyan-dust)}
.ig__reel{position:relative;margin-inline:calc(var(--gutter)*-1);overflow:hidden}
.ig__track{display:flex;gap:clamp(.6rem,1.2vw,1rem);padding-inline:clamp(.6rem,1.2vw,1rem);
  overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}
.ig__track::-webkit-scrollbar{display:none}
.lb__media{cursor:grab}
.ig__card{position:relative;flex:0 0 clamp(208px,23vw,318px);aspect-ratio:4/5;overflow:hidden;border-radius:6px;display:block;
  border:1px solid var(--line-soft);transition:transform .55s var(--ease-out),filter .5s var(--ease),opacity .5s var(--ease)}
.ig__card .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:sepia(.45) hue-rotate(-15deg) saturate(.8) brightness(.88);transition:transform .9s var(--ease-out),filter .55s var(--ease-out)}
.ig__track:hover .ig__card{opacity:.5;filter:saturate(.7)}
.ig__track:hover .ig__card:hover{opacity:1;filter:none;transform:translateY(-6px) scale(1.015)}
.ig__card:hover .ph{transform:scale(1.08);filter:none}
.ig__ov{position:absolute;inset:0;z-index:2;padding:.85rem;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(23,19,9,.45) 0%,rgba(23,19,9,0) 30%,rgba(23,19,9,0) 55%,rgba(23,19,9,.8) 100%);
  opacity:0;transition:opacity .45s var(--ease)}
.ig__card:hover .ig__ov{opacity:1}
.ig__plus{align-self:flex-end;width:30px;height:30px;border-radius:50%;border:1px solid rgba(236,220,190,.5);display:grid;place-items:center;
  color:var(--sand);font-size:1rem;line-height:1;transform:scale(.4) rotate(-90deg);opacity:0;transition:transform .5s var(--ease-out) .05s,opacity .4s var(--ease) .05s}
.ig__card:hover .ig__plus{transform:none;opacity:1}
.ig__cap{display:flex;align-items:center;justify-content:space-between;gap:.6rem;transform:translateY(10px);opacity:0;
  transition:transform .5s var(--ease-out) .08s,opacity .45s var(--ease) .08s}
.ig__card:hover .ig__cap{transform:none;opacity:1}
.ig__likes,.ig__view{font-family:var(--font-ui);font-weight:500;font-size:.64rem;letter-spacing:.06em;color:var(--sand);display:inline-flex;align-items:center;gap:.3rem}
.ig__view{color:var(--amber-soft)}
.ig__edge{position:absolute;top:0;bottom:0;z-index:4;width:clamp(54px,15%,240px);pointer-events:none}
.ig__edge--l{left:0;background:linear-gradient(90deg,var(--ink) 8%,transparent);backdrop-filter:blur(7px);
  -webkit-mask:linear-gradient(90deg,#000 0%,#000 26%,transparent 92%);mask:linear-gradient(90deg,#000 0%,#000 26%,transparent 92%)}
.ig__edge--r{right:0;background:linear-gradient(270deg,var(--ink) 8%,transparent);backdrop-filter:blur(7px);
  -webkit-mask:linear-gradient(270deg,#000 0%,#000 26%,transparent 92%);mask:linear-gradient(270deg,#000 0%,#000 26%,transparent 92%)}
@media (prefers-reduced-motion:reduce){.ig__track{transform:none !important}}