:root{
  --ink:#0A0A0B;
  --bone:#EFEBE4;
  --oat:#D8D2C6;
  --ash:#1C1B1A;
  --fog:#B6B1A8;
}
html, body { background: var(--bone); color: var(--ink); }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* film grain */
.grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Ken-burns */
@keyframes drift {
  0%   { transform: scale(1.05) translate3d(0,0,0); }
  100% { transform: scale(1.14) translate3d(-1.2%, -1.2%, 0); }
}
.drift { animation: drift 26s ease-out forwards; }

/* reveals */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-slow { transition-duration: 1.6s; }
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.4s}.d5{transition-delay:.52s}.d6{transition-delay:.66s}

/* mask wipe for images */
.mask-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.77,0,.175,1); }
.mask-wipe.in { clip-path: inset(0 0 0 0); }

/* image hover zoom */
.hover-zoom img { transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1.6s ease; }
.hover-zoom:hover img { transform: scale(1.05); filter: brightness(.92); }

/* hairline */
.hairline { height:1px; background: currentColor; opacity:.25; }

/* marquee */
@keyframes marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-track { animation: marq 52s linear infinite; }

/* float */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
.floaty { animation: floaty 3.2s ease-in-out infinite; }

/* numeric feature */
.num { font-feature-settings: "lnum", "tnum"; }

/* img fade */
.img-fade { opacity: 0; transition: opacity 1.1s ease; }
.img-fade.loaded { opacity: 1; }

/* hide scrollbar */
.no-bar::-webkit-scrollbar { display:none; }
.no-bar { scrollbar-width: none; }

/* header glass */
.hdr-glass { background: rgba(239,235,228,.62); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); border-bottom:1px solid rgba(10,10,11,.07); }

/* link underline */
.ln { position:relative; }
.ln::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .6s cubic-bezier(.77,0,.175,1);
}
.ln:hover::after { transform: scaleX(1); transform-origin: left; }

/* lightbox */
.lightbox { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* radio chips */
.chip {
  cursor: pointer; border: 1px solid rgba(239,235,228,.3); border-radius: 9999px;
  padding: .55rem 1.1rem; font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(239,235,228,.75); transition: all .4s ease;
}
.chip:hover { color: #EFEBE4; border-color: rgba(239,235,228,.6); }
.chip-active { background: #EFEBE4; color: #0A0A0B; border-color: #EFEBE4; }

/* mobile nav */
.mnav { position: relative; width: fit-content; }
.mnav::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.mnav:hover::after { transform: scaleX(1); }

/* language toggle */
.lang-opt { transition: opacity .3s ease, color .3s ease; }
.lang-opt.font-medium { opacity: 1; }

/* selection */
::selection { background: #0A0A0B; color: #EFEBE4; }

/* page transition fade-in */
.page-in { animation: pagein 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pagein { from { opacity:0; } to { opacity:1; } }

/* vignette for hero */
.vignette::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.45) 100%);
}

/* video play overlay */
.play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: opacity .6s ease;
}
.play-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.1) 100%);
}
.play-btn {
  position: relative; z-index: 2;
  width: 72px; height: 72px; border-radius: 9999px;
  border: 1px solid rgba(239,235,228,.6);
  background: rgba(10,10,11,.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), background .4s ease;
}
.hover-zoom:hover .play-btn { transform: scale(1.12); background: rgba(239,235,228,.9); }
.hover-zoom:hover .play-btn svg { fill: #0A0A0B; }
.play-btn svg { width: 22px; height: 22px; fill: #EFEBE4; transition: fill .4s ease; margin-left: 3px; }
.play-meta {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  color: rgba(239,235,228,.9);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
}
.play-meta .rec { width: 8px; height: 8px; border-radius: 9999px; background: #EFEBE4; display: block; }
.runtime {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  padding: 4px 10px; border-radius: 9999px;
  background: rgba(10,10,11,.6); backdrop-filter: blur(8px);
  color: #EFEBE4; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* thin progress bar used in portfolio */
.prog { background: linear-gradient(to right, currentColor 0, currentColor 100%) no-repeat; background-size: 0% 1px; background-position: left bottom; transition: background-size 1.4s cubic-bezier(.77,0,.175,1); }
.prog.in { background-size: 100% 1px; }