/* ═══════════════ RIMON DEBNATH — FOLIO 2026 ═══════════════ */

:root {
  --bg: #0b0a09;
  --bg-2: #12100e;
  --ink: #ece7df;
  --dim: #8d867c;
  --line: rgba(236, 231, 223, 0.11);
  --acc: #ff4d24;
  --acc-2: #d6b98c;
  --disp: "Clash Display", sans-serif;
  --body: "Satoshi", sans-serif;
  --monoF: "JetBrains Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--monoF); font-size: 0.66rem; letter-spacing: 0.14em; }
::selection { background: var(--acc); color: #0b0a09; }

/* the native pointer is hidden only once app.js has started the custom cursor (.has-cursor) */
@media (hover: hover) and (min-width: 901px) { .has-cursor body, .has-cursor body a, .has-cursor body button { cursor: none; } }
/* focus scrolling keeps controls clear of the fixed nav (sections themselves are not affected) */
main a, main button, .wcard { scroll-margin-top: 6rem; scroll-margin-bottom: 1.5rem; }

/* ═══ PROGRESS + GRAIN ═══ */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); z-index: 80; }
.grain { position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 8s steps(10) infinite; }
@keyframes grain { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)} 30%{transform:translate(3%,-12%)} 50%{transform:translate(9%,4%)} 70%{transform:translate(-7%,6%)} 90%{transform:translate(4%,2%)} }

/* ═══ PRELOADER ═══ */
.preloader { position: fixed; inset: 0; z-index: 100; }
.preloader__panel { position: absolute; inset: 0; background: var(--bg-2); }
.preloader__panel--2 { background: var(--acc); z-index: -1; }
.preloader__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.4rem, 4vw, 3rem); }
.preloader__brand { color: var(--dim); }
.preloader__word { font-family: var(--disp); font-weight: 600; font-size: clamp(1.7rem, 8.6vw, 8.5rem); letter-spacing: 0.01em; line-height: 1; align-self: center; margin: auto 0; overflow: hidden; white-space: nowrap; } /* the inline-block chars could break mid-name on small phones */
.preloader__word .ch { display: inline-block; transform: translateY(120%); }
.preloader__foot { display: flex; justify-content: space-between; align-items: baseline; color: var(--dim); }
.preloader__foot #preCount { font-size: 1rem; color: var(--ink); }

/* ═══ CURSOR ═══ */
.cursor { position: fixed; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); pointer-events: none; z-index: 99; transform: translate(-50%, -50%); transition: width 0.25s, height 0.25s, background 0.25s, opacity 0.25s; mix-blend-mode: exclusion; }
.cursor.is-hover { width: 56px; height: 56px; background: #fff; }
.cursor.is-row { width: 80px; height: 80px; background: var(--acc); mix-blend-mode: normal; opacity: 0.95; }
.cursor-label { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -50%); color: #0b0a09; opacity: 0; font-weight: 500; }
.cursor-label.on { opacity: 1; }
/* hairline ring over accent-filled controls (a white exclusion disc turns cyan on #ff4d24) */
.cursor.is-ring { width: 68px; height: 68px; background: transparent; border: 1px solid var(--ink); mix-blend-mode: normal; opacity: 1; }
/* hidden until the first mouse move, so keyboard-only visitors never see a stray dot */
.cursor:not(.is-live) { opacity: 0; }
@media (hover: none), (max-width: 900px) { .cursor, .cursor-label { display: none; } }
html:not(.has-cursor) .cursor, html:not(.has-cursor) .cursor-label { display: none; }

/* ═══ NAV ═══ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 1.3rem clamp(1.2rem, 4vw, 3rem); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), background 0.3s, backdrop-filter 0.3s; }
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-hidden:has(:focus-visible) { transform: none; } /* keyboard focus brings the hidden nav back */
.nav.is-scrolled { background: rgba(11, 10, 9, 0.65); backdrop-filter: blur(16px); }
.nav__logo { font-family: var(--disp); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.14em; }
.nav__logo span { color: var(--acc); }
.nav__links { display: flex; gap: 2.2rem; }
.nav__link { font-size: 0.85rem; font-weight: 500; color: var(--dim); display: flex; gap: 0.45rem; align-items: baseline; position: relative; transition: color 0.3s; }
.nav__idx { color: var(--acc); font-size: 0.6rem; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); }
.nav__cta { font-family: var(--monoF); font-size: 0.62rem; letter-spacing: 0.12em; display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--line); border-radius: 100px; padding: 0.6rem 1.15rem; transition: background 0.35s, color 0.35s, border-color 0.35s; }
@media (hover: hover) {
  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .nav__cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}
.nav__dot { width: 6px; height: 6px; border-radius: 50%; background: #59d97c; box-shadow: 0 0 12px #59d97c; }
/* 44px tap target; negative margins keep the nav height unchanged */
.nav__burger { display: none; width: 44px; height: 44px; margin: -10px -4px -10px 0; background: none; border: 0; position: relative; color: var(--ink); }
.nav__burger span { position: absolute; left: 4px; width: 36px; height: 1.5px; background: var(--ink); transition: transform 0.3s, top 0.3s; }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; background: var(--bg-2); display: flex; flex-direction: column; justify-content: safe center; gap: 0.6rem; padding: 5.5rem 2.4rem 2.4rem; overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1); }
.menu.is-open { clip-path: inset(0); }
.menu__link { font-family: var(--disp); font-weight: 600; font-size: clamp(2rem, min(10vw, 11svh), 4.6rem); line-height: 1.15; display: flex; gap: 1rem; align-items: baseline; }
.menu__link .mono { color: var(--acc); }
.menu__mail { margin-top: 2rem; color: var(--dim); align-self: flex-start; padding: 0.8rem 0; }
@media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: block; } }
@media (min-width: 901px) { .menu { display: none; } }
section[tabindex="-1"]:focus { outline: none; }

/* ═══ HERO ═══ */
/* the gradient is a fallback for no-WebGL and reduced motion; the opaque shader canvas covers it otherwise */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; background: radial-gradient(60% 50% at 70% 78%, rgba(255, 77, 36, 0.16), transparent 70%), radial-gradient(50% 60% at 95% 8%, rgba(76, 41, 140, 0.22), transparent 70%), var(--bg); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__frame { position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6.2rem clamp(1.2rem, 4vw, 3rem) 2.2rem; }
.hero__topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 1rem; flex-wrap: wrap; }
/* title + SCROLL badge share one box, so the badge is placed by the title's own geometry (never by the hero height) */
.hero__mid { position: relative; margin: auto 0; font-size: clamp(2.35rem, 11.2vw, 11rem); }
.hero__title { font-family: var(--disp); font-weight: 600; text-transform: uppercase; line-height: 0.93; letter-spacing: -0.015em; font-size: 1em; }
.hero__row { display: flex; align-items: baseline; gap: clamp(0.8rem, 3vw, 2.6rem); overflow: hidden; white-space: nowrap; }
.hero__row--right { justify-content: flex-end; }
.hero__thin { font-weight: 400; font-size: 0.42em; color: var(--acc-2); letter-spacing: 0.06em; }
.hero__thin--it { font-style: italic; color: var(--acc); font-size: 0.6em; }
.hero__word--stroke { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.hero__title .ch { display: inline-block; transform: translateY(115%); will-change: transform; }
.hero__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); padding-top: 1.4rem; flex-wrap: wrap; }
.hero__intro { max-width: 430px; color: var(--dim); font-size: 1.02rem; font-weight: 400; text-shadow: 0 1px 14px rgba(11, 10, 9, 0.9); }
.hero__intro b { color: var(--ink); font-weight: 700; }
.hero__stack { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hero__stack span { border: 1px solid var(--line); padding: 0.42rem 0.85rem; border-radius: 100px; color: var(--dim); transition: 0.3s; }
@media (hover: hover) { .hero__stack span:hover { color: var(--bg); background: var(--acc); border-color: var(--acc); transform: translateY(-3px); } }
.hero__meta { display: flex; flex-direction: column; gap: 0.3rem; text-align: right; color: var(--dim); }
.hero__meta span:first-child { color: var(--acc); font-size: 0.95rem; }
/* sits in the empty pocket left of "&", centred on the second title row and sized from the title font (em),
   so it fits that row at any viewport height and never reaches CREATIVE, ENGINEER or the intro below */
.hero__badge { --s: clamp(64px, 0.78em, 104px); position: absolute; left: 0; bottom: calc(0.465em - var(--s) / 2); width: var(--s); height: var(--s); z-index: 3; }
.hero__badge-ring { display: block; width: 100%; height: 100%; animation: spin 14s linear infinite; } /* block: the badge inherits the title font size, an inline svg would sit on a huge line box */
.hero__badge-ring text { font-family: var(--monoF); font-size: 10.5px; letter-spacing: 0.24em; fill: var(--dim); }
.hero__badge-arrow { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.25rem; color: var(--acc); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .hero__badge { display: none; } .hero__meta { text-align: left; } }

/* ═══ MARQUEE ═══ */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.05rem 0; overflow: hidden; background: var(--bg-2); }
.marquee__track { display: flex; width: max-content; white-space: nowrap; animation: mq 30s linear infinite; }
.marquee__track span { font-family: var(--disp); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--dim); }
.marquee__track i { font-style: normal; color: var(--acc); -webkit-text-stroke: 0; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ═══ SECTIONS ═══ */
.section { padding: clamp(5rem, 13vh, 9.5rem) clamp(1.2rem, 4vw, 3rem); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: clamp(2.6rem, 7vh, 4.6rem); }
.section__num { font-family: var(--disp); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--acc); overflow: hidden; display: inline-block; flex: none; white-space: nowrap; }
.section__num .ch { display: inline-block; transform: translateY(115%); }
.section__label { color: var(--dim); font-weight: 400; min-width: 0; text-align: right; }

/* ═══ ABOUT ═══ */
.about__grid { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: clamp(2.4rem, 6vw, 6rem); align-items: center; }
.about__grid > * { min-width: 0; }
.about__visual { overflow: hidden; } /* clips the bounding box of the spinning ring so phones do not scroll sideways */

.orb { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.orb__blob { position: absolute; inset: 12%; border-radius: 42% 58% 61% 39% / 45% 41% 59% 55%; background: conic-gradient(from 40deg, #ff4d24, #7c3aed, #1e1b18, #d6b98c, #ff4d24); filter: blur(26px) saturate(1.2); opacity: 0.55; animation: blob 11s ease-in-out infinite alternate; }
@keyframes blob { 0% { border-radius: 42% 58% 61% 39% / 45% 41% 59% 55%; transform: rotate(0deg) scale(1); } 50% { border-radius: 58% 42% 39% 61% / 50% 60% 40% 50%; transform: rotate(40deg) scale(1.06); } 100% { border-radius: 45% 55% 52% 48% / 58% 44% 56% 42%; transform: rotate(-25deg) scale(0.97); } }
.orb__ring { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; }
.orb__ring--1 { animation: spin 26s linear infinite; border-style: dashed; }
.orb__ring--2 { inset: 9%; border-color: rgba(255, 77, 36, 0.35); animation: spin 18s linear infinite reverse; }
.orb__text { position: absolute; inset: 3.5%; animation: spin 30s linear infinite; }
.orb__text text { font-family: var(--monoF); font-size: 8.6px; letter-spacing: 0.3em; fill: var(--dim); }
.orb__core { font-family: var(--disp); font-weight: 700; font-size: clamp(3rem, 7vw, 4.6rem); letter-spacing: 0.03em; color: var(--ink); text-shadow: 0 0 44px rgba(255, 77, 36, 0.45); }

.about__lead { font-family: var(--disp); font-weight: 500; font-size: clamp(1.4rem, 2.9vw, 2.3rem); line-height: 1.3; letter-spacing: 0.002em; margin-bottom: 1.6rem; }
.about__text { color: var(--dim); max-width: 640px; font-size: 1.04rem; }
.about__lead .wd, .about__text .wd { opacity: 0.13; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.4rem; }
.stat { background: var(--bg); padding: 1.45rem 1.15rem; transition: background 0.3s; }
@media (hover: hover) { .stat:hover { background: var(--bg-2); } }
.stat__num { font-family: var(--disp); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--ink); }
.stat__num span { color: var(--acc); }
.stat__label { color: var(--dim); margin-top: 0.3rem; }
@media (max-width: 840px) { .about__grid { grid-template-columns: 1fr; } }
/* explicit counts that divide 4 evenly: an auto-fit wrap left bare grey cells (the 1px separators are the grid background) */
@media (max-width: 600px), (min-width: 841px) and (max-width: 1320px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.about__services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(3rem, 8vh, 5rem); }
.svc { background: var(--bg); padding: 2.1rem 1.7rem; position: relative; overflow: hidden; transition: background 0.35s; }
@media (hover: hover) { .svc:hover { background: var(--bg-2); } }
.svc__idx { color: var(--acc); }
.svc h3 { font-family: var(--disp); font-weight: 600; font-size: 1.35rem; margin: 0.9rem 0 0.5rem; }
.svc p { color: var(--dim); font-size: 0.94rem; }
@media (max-width: 800px) { .about__services { grid-template-columns: 1fr; } }

/* ═══ EXPERIENCE ═══ */
.exp .section__head { margin-bottom: 0; } /* one rule above the list, not two */
.exp__item { display: grid; grid-template-columns: 172px 1.1fr 1fr; gap: 1.6rem; align-items: baseline; padding: 2.1rem 0.4rem; border-bottom: 1px solid var(--line); position: relative; transition: padding 0.35s; }
.exp__item > * { min-width: 0; }
.exp__item::before { content: ""; position: absolute; inset: 0; background: var(--bg-2); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1); z-index: -1; }
@media (hover: hover) {
  .exp__item:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
  .exp__item:hover { padding-left: 1.1rem; padding-right: 1.1rem; }
}
.exp__date { color: var(--acc); }
.exp__role { font-family: var(--disp); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.exp__role em { font-style: italic; color: var(--acc-2); }
.exp__co { display: block; color: var(--dim); margin-top: 0.35rem; }
.exp__desc { color: var(--dim); font-size: 0.96rem; }
@media (max-width: 760px) { .exp__item { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ═══ WORK — CARD RAIL ═══ */
.work { --pad: clamp(1.2rem, 4vw, 3rem); --gap: clamp(0.75rem, 1.5vw, 1.3rem); --card-w: min(calc((100% - 2 * var(--gap)) / 3), 640px); }

/* editorial intro: giant SELECTED / outlined WORK + one-line lede */
.work__intro { display: grid; grid-template-columns: 1fr minmax(240px, 340px); align-items: end; gap: 1.6rem 3rem; margin-bottom: clamp(2.2rem, 6vh, 3.6rem); }
.work__title { font-family: var(--disp); font-weight: 600; text-transform: uppercase; font-size: clamp(2.6rem, 9.4vw, 8.6rem); line-height: 0.88; letter-spacing: -0.02em; }
.work__line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: 0.04em; }
.work__line .ch { display: inline-block; }
.work__line--stroke { color: transparent; -webkit-text-stroke: 1.5px var(--ink); padding-left: 0.9em; }
.work__sup { font-size: max(0.66rem, 0.075em); color: var(--acc); -webkit-text-stroke: 0; vertical-align: top; margin-left: 0.5em; position: relative; top: 1.1em; }
.work__lede { color: var(--dim); font-size: 1rem; line-height: 1.55; padding-bottom: 0.5rem; }
.work__lede b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .work__intro { grid-template-columns: 1fr; } .work__line--stroke { padding-left: 0.5em; } }

.work__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 1rem; margin-bottom: 1.5rem; }
.work__hint { color: var(--dim); }
.work__hint-touch { display: none; }
.work__ctrl { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; }
.work__count { color: var(--dim); margin-right: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.work__arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--body); font-size: 1.05rem; line-height: 1; display: grid; place-items: center; transition: background 0.35s, border-color 0.35s, color 0.35s, opacity 0.35s; }
.work__arrow[aria-disabled="true"] { opacity: 0.28; }
.work__arrow:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* desktop: the peek is no wider than the gutter, so the mask fades only the gutters (phones and tablets fade the whole peek, below) */
.work__rail { list-style: none; position: relative; display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0.35rem var(--pad) 0.5rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%); }
.work__rail::-webkit-scrollbar { display: none; }
.work__rail.is-dragging, .work__rail.is-settling { scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.work__rail.is-dragging .wcard { pointer-events: none; }

.wcard { flex: 0 0 var(--card-w); min-width: 0; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; isolation: isolate; container-type: inline-size; transition: border-color 0.45s; }
/* keyboard focus only: a mouse click, tap or drag-start must not leave the "clickable" accent ring on a card */
.wcard:focus-visible, .wcard:has(:focus-visible) { border-color: rgba(255, 77, 36, 0.5); }
.wcard:focus-visible, .wcard:has(.wcard__main:focus-visible) { outline: 2px solid var(--acc); outline-offset: -2px; }
.wcard__main:focus-visible { outline: none; }
/* 1px accent-to-sand gradient ring (opacity only); inset 0 because .wcard clips its overflow */
.wcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3; background: linear-gradient(140deg, var(--acc) 0%, rgba(214, 185, 140, 0.55) 28%, rgba(236, 231, 223, 0) 55%, rgba(255, 77, 36, 0.55) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.5s; }
.wcard:focus-visible::after, .wcard:has(:focus-visible)::after { opacity: 1; }

/* media (screenshot or typographic face); --mx/--my are set by the pointer for the hover parallax */
.wcard__media { --mx: 0.5; --my: 0.5; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0f0d0b; border-bottom: 1px solid var(--line); }
.wcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transform: scale(1.001); filter: saturate(0.9) brightness(0.9); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s; -webkit-user-drag: none; }
.wcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 10, 9, 0.5) 0%, rgba(11, 10, 9, 0) 26%, rgba(11, 10, 9, 0) 72%, rgba(11, 10, 9, 0.28) 100%); }
/* one-shot light sheen across live screenshots (NDA faces use ::before for their glow) */
.wcard--live .wcard__media::before { content: ""; position: absolute; inset: 0 -60%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 36%, rgba(255, 236, 220, 0.07) 45%, rgba(255, 236, 220, 0.24) 50%, rgba(255, 236, 220, 0.07) 55%, transparent 64%); transform: translate3d(-60%, 0, 0); }
.wcard__badge { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.7rem; border-radius: 100px; background: rgba(11, 10, 9, 0.72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); line-height: 1; color: var(--ink); pointer-events: none; }
.wcard__badge--sand { color: var(--acc-2); }
.wcard__badge--nda { color: var(--bg); background: var(--acc); border-color: var(--acc); font-weight: 500; }
.wcard__dot { width: 6px; height: 6px; border-radius: 50%; background: #59d97c; box-shadow: 0 0 10px #59d97c; }

.wcard__face { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem 1.35rem 1.3rem; background: linear-gradient(160deg, #17130f 0%, #0d0b0a 70%); }
.wcard__face::before { content: ""; position: absolute; inset: -12%; background: var(--glow); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wcard__face::after { background: repeating-linear-gradient(90deg, rgba(236, 231, 223, 0.05) 0 1px, transparent 1px 16.6667%), url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: auto, 220px 220px; mix-blend-mode: soft-light; opacity: 0.9; }
.wcard__face--a { --glow: radial-gradient(75% 85% at 0% 100%, rgba(255, 77, 36, 0.62), transparent 62%), radial-gradient(60% 60% at 100% 0%, rgba(124, 58, 237, 0.24), transparent 70%); }
.wcard__face--b { --glow: radial-gradient(80% 90% at 100% 100%, rgba(214, 185, 140, 0.36), transparent 62%), radial-gradient(55% 60% at 0% 10%, rgba(255, 77, 36, 0.3), transparent 70%); }
.wcard__face--c { --glow: radial-gradient(90% 75% at 45% 115%, rgba(255, 77, 36, 0.58), transparent 62%), radial-gradient(60% 65% at 100% 0%, rgba(124, 58, 237, 0.36), transparent 70%); }
.wcard__ghost { position: absolute; right: -0.02em; top: -0.16em; font-family: var(--disp); font-weight: 600; font-size: 58cqi; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(236, 231, 223, 0.1); pointer-events: none; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wcard__flow { position: relative; z-index: 1; color: var(--acc-2); margin-bottom: 0.75rem; }
.wcard__big { position: relative; z-index: 1; font-family: var(--disp); font-weight: 600; text-transform: uppercase; font-size: clamp(2rem, 13.5cqi, 5rem); line-height: 0.92; letter-spacing: -0.01em; color: var(--ink); }
.wcard__big em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 1.3px var(--ink); }

/* abstract glyph per NDA face: no numbers, no UI, nothing that implies real data */
.wcard__art { position: absolute; z-index: 1; top: clamp(0.9rem, 4.4cqi, 1.25rem); left: clamp(1rem, 4.6cqi, 1.35rem); pointer-events: none; }
.wcard__art i { display: block; }
.wcard__art--doc { width: 42%; display: grid; gap: clamp(4px, 1.6cqi, 7px); }
.wcard__art--doc i { height: 5px; border-radius: 1px; background: rgba(236, 231, 223, 0.13); transform-origin: 0 50%; }
.wcard__art--doc i:nth-child(1) { width: 34%; height: 7px; background: rgba(236, 231, 223, 0.42); margin-bottom: 4px; }
.wcard__art--doc i:nth-child(2) { width: 100%; }
.wcard__art--doc i:nth-child(3) { width: 88%; }
.wcard__art--doc i:nth-child(4) { width: 46%; background: var(--ink); opacity: 0.85; }
.wcard__art--doc i:nth-child(5) { width: 94%; }
.wcard__art--doc i:nth-child(6) { width: 70%; }
.wcard__art--doc i:nth-child(7) { width: 58%; background: var(--acc); opacity: 0.9; }
.wcard__art--emi { display: flex; gap: clamp(3px, 1.3cqi, 6px); align-items: center; }
.wcard__art--emi i { width: clamp(8px, 3.1cqi, 14px); height: clamp(8px, 3.1cqi, 14px); border-radius: 50%; border: 1px solid rgba(236, 231, 223, 0.28); }
.wcard__art--emi i:nth-child(-n+5) { background: var(--acc-2); border-color: var(--acc-2); }
.wcard__art--emi i:nth-child(6) { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 77, 36, 0.18); }
.wcard__art--film { width: 50%; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(3px, 1cqi, 5px); }
.wcard__art--film i { aspect-ratio: 16 / 10; border-radius: 2px; border: 1px solid rgba(236, 231, 223, 0.2); background: rgba(236, 231, 223, 0.04); }
.wcard__art--film i:nth-child(-n+2) { background: rgba(255, 77, 36, 0.28); border-color: rgba(255, 77, 36, 0.6); }
.wcard__art--film i:nth-child(3) { border-color: rgba(236, 231, 223, 0.75); background: rgba(236, 231, 223, 0.1); }
.wcard__art--film b { grid-column: 1 / -1; display: block; position: relative; height: 2px; margin-top: clamp(5px, 1.8cqi, 9px); border-radius: 2px; background: rgba(236, 231, 223, 0.16); }
.wcard__art--film b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0.5); }
.wcard__art--film b::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 5px; right: -5px; background: radial-gradient(circle closest-side, var(--ink) 70%, transparent 78%) right center / 10px 10px no-repeat; transform: translateX(-50%); }
@container (max-width: 380px) { .wcard__art--doc i:nth-child(n+3):nth-child(-n+6) { display: none; } }

/* body: tags, note and footer form one cluster anchored to the card bottom */
.wcard__body { flex: 1; display: flex; flex-direction: column; padding: 1.3rem 1.35rem 1.25rem; }
.wcard__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--dim); }
.wcard__meta b { font-weight: 500; color: var(--acc); margin-right: 0.9rem; }
.wcard__title { font-family: var(--disp); font-weight: 600; font-size: clamp(1.45rem, 6.4cqi, 2.15rem); line-height: 1.06; letter-spacing: 0.002em; margin: 0.8rem 0 0.75rem; }
.wcard__sub { display: block; font-weight: 500; font-size: 0.6em; line-height: 1.25; color: var(--acc-2); margin-top: 0.3rem; letter-spacing: 0.01em; }
.wcard__main::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wcard__desc { color: var(--dim); font-size: 0.94rem; line-height: 1.55; }
.wcard__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 1.3rem; }
.wcard__tags li { font-size: 0.62rem; color: var(--dim); border: 1px solid var(--line); border-radius: 100px; padding: 0.36rem 0.7rem; line-height: 1; }
.wcard__note { font-size: 0.66rem; line-height: 1.6; color: var(--acc-2); margin-top: 1rem; display: flex; align-items: flex-start; gap: 0.5rem; text-wrap: balance; }
.wcard__note::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: 0.8em; background: var(--acc-2); }
.wcard__foot { padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wcard__body > :nth-last-child(2) { margin-bottom: 1.5rem; }
.wcard__link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); line-height: 1; }
.wcard__link b { font-weight: 400; color: var(--acc); display: inline-block; transition: transform 0.35s; }
.wcard__link--alt { position: relative; z-index: 2; color: var(--dim); border: 1px solid var(--line); border-radius: 100px; padding: 0.55rem 0.9rem; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.wcard__link--alt:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.wcard__private { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--dim); line-height: 1; padding: 0.55rem 0; border: 1px solid transparent; }
.wcard__private i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px rgba(255, 77, 36, 0.8); }

.work__bar { position: relative; height: 2px; margin-top: 1.6rem; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; overflow: hidden; }
.work__thumb { position: absolute; left: 0; top: 0; height: 2px; width: 60%; background: var(--acc); will-change: transform; }

@media (hover: hover) {
  .work__arrow:hover:not([aria-disabled="true"]) { background: var(--acc); border-color: var(--acc); color: var(--bg); }
  /* only the clickable cards get the accent ring; private (NDA-class) cards stay neutral */
  .wcard--live:hover { border-color: transparent; }
  .wcard--live:hover::after { opacity: 1; }
  .wcard--nda:hover { border-color: rgba(236, 231, 223, 0.2); }
  .wcard:hover .wcard__media img { transform: scale(1.045); filter: none; }
  .wcard:hover .wcard__face::before { transform: scale(1.08); }
  .wcard:hover .wcard__link b { transform: translate(2px, -2px); } /* nudge along the arrow's own diagonal */
  .wcard__link--alt:hover { color: var(--ink); border-color: var(--acc); }
}
/* depth on a real mouse: the screenshot drifts against the cursor, the light sweeps once, NDA glow and numeral split apart */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wcard:hover .wcard__media img { transform: translate3d(calc((var(--mx) - 0.5) * -22px), calc((var(--my) - 0.5) * -14px), 0) scale(1.07); }
  .wcard--live:hover .wcard__media::before { transform: translate3d(60%, 0, 0); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .wcard:hover .wcard__ghost { transform: translate3d(calc((var(--mx) - 0.5) * 26px), calc((var(--my) - 0.5) * 18px), 0); }
  .wcard:hover .wcard__face::before { transform: translate3d(calc((var(--mx) - 0.5) * -30px), calc((var(--my) - 0.5) * -20px), 0) scale(1.12); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wcard:hover .wcard__art--doc i { animation: artType 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .wcard:hover .wcard__art--doc i:nth-child(2) { animation-delay: 0.06s; }
  .wcard:hover .wcard__art--doc i:nth-child(3) { animation-delay: 0.12s; }
  .wcard:hover .wcard__art--doc i:nth-child(4) { animation-delay: 0.18s; }
  .wcard:hover .wcard__art--doc i:nth-child(5) { animation-delay: 0.24s; }
  .wcard:hover .wcard__art--doc i:nth-child(6) { animation-delay: 0.3s; }
  .wcard:hover .wcard__art--doc i:nth-child(7) { animation-delay: 0.36s; }
  .wcard:hover .wcard__art--emi i:nth-child(6) { animation: artPulse 1.4s ease-in-out infinite; }
  .wcard:hover .wcard__art--film b::before { animation: filmProg 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  .wcard:hover .wcard__art--film b::after { animation: filmHead 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
}
@keyframes artType { from { transform: scaleX(0); } }
@keyframes artPulse { 50% { transform: scale(1.35); } }
@keyframes filmProg { to { transform: scaleX(0.9); } }
@keyframes filmHead { to { transform: translateX(-10%); } }
@media (prefers-reduced-motion: reduce) { .wcard--live .wcard__media::before { display: none; } }

@media (max-width: 1100px) {
  .work { --card-w: calc((100% - 2 * var(--gap)) / 2.3); }
  /* trailing spacer: the last stop puts card 04 at the start (05 on phones), so no hard-cut slice of the previous card stays on the left */
  .work__rail::after { content: ""; flex: 0 0 calc(100% - 2 * var(--card-w) - 2 * var(--gap)); }
  /* the peeking card is wider than the gutter here: fade it from where it starts (--peek, derived from --card-w)
     to the edge, so it reads as "more", never as a hard-cut slice of text */
  .work__rail { --peek: calc(87% - 0.74 * var(--pad) + 0.26 * var(--gap)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 var(--peek), rgba(0, 0, 0, 0.3) calc(50% + var(--peek) / 2), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 var(--peek), rgba(0, 0, 0, 0.3) calc(50% + var(--peek) / 2), transparent 100%); }
}
@media (max-width: 700px) {
  .work { --card-w: 88%; }
  .work__rail::after { flex-basis: calc(100% - var(--card-w) - var(--gap)); }
  .work__rail { --peek: calc(88% - 0.76 * var(--pad) + var(--gap)); }
  .work__arrow { width: 44px; height: 44px; font-size: 0.95rem; }
  .work__count { margin-right: 0.4rem; }
  .wcard__body { padding: 1.15rem 1.1rem 1.1rem; }
  .wcard__face { padding: 1rem 1.1rem 1.1rem; }
  .wcard__badge { top: 0.7rem; right: 0.7rem; }
}
@media (hover: none), (max-width: 900px) { .work__hint-desk { display: none; } .work__hint-touch { display: inline; } }
@media (max-width: 420px) { .work__ctrl { gap: 0.4rem; } .work__count { margin-right: 0.3rem; } }
@media (max-width: 360px) { .wcard__meta { letter-spacing: 0.08em; gap: 0.5rem; } .wcard__meta b { margin-right: 0.5rem; } }
.work__foot { margin-top: 3rem; text-align: center; }
.btn { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--disp); font-weight: 600; font-size: 0.98rem; border: 1px solid var(--ink); border-radius: 100px; padding: 1.05rem 2.2rem; transition: background 0.35s, border-color 0.35s, color 0.35s; }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (hover: hover) { .btn:hover { background: var(--acc); border-color: var(--acc); color: var(--bg); } }

/* ═══ CONTACT ═══ */
.contact__stage { text-align: center; padding: clamp(2rem, 8vh, 5rem) 0 1rem; }
.contact__kick { color: var(--acc); display: inline-block; margin-bottom: 2rem; }
.contact__big { display: block; font-family: var(--disp); font-weight: 600; text-transform: uppercase; font-size: clamp(1.9rem, 9.4vw, 8.6rem); line-height: 0.98; letter-spacing: -0.01em; }
.contact__line { display: block; overflow: hidden; white-space: nowrap; }
.contact__line .ch { display: inline-block; transform: translateY(115%); }
.contact__line--stroke { color: transparent; -webkit-text-stroke: 1.6px var(--acc); }
.contact__row { display: flex; justify-content: center; gap: 1.1rem; margin-top: 3rem; flex-wrap: wrap; }
.contact__pill { font-family: var(--disp); font-weight: 500; font-size: 1.02rem; border-radius: 100px; padding: 1.05rem 2.1rem; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); transition: background 0.35s, color 0.35s, border-color 0.35s; }
.contact__pill--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
@media (hover: hover) {
  .contact__pill:hover { background: var(--acc); border-color: var(--acc); }
  .contact__pill--ghost:hover { border-color: var(--acc); color: var(--acc); background: transparent; }
}

/* ═══ FOOTER ═══ */
.footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.5rem clamp(1.2rem, 4vw, 3rem); border-top: 1px solid var(--line); color: var(--dim); }
.footer__soc { display: flex; gap: 1.6rem; }
/* bigger hit area without changing the layout */
.footer__soc a { position: relative; display: inline-block; padding: 0.8rem 0.4rem; margin: -0.8rem -0.4rem; transition: color 0.3s; }
@media (hover: hover) { .footer__soc a:hover { color: var(--acc); } }

/* ═══ UTIL ═══ */
.reveal-b { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* transition: none (not a 0.01ms duration): a still-running micro-transition made GSAP read opacity 0 as the end value of the hero intro */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; } }