/* ============================================================
   PUSHKAR ALANGE — CINEMATIC PORTFOLIO
   Shared stylesheet for all scenes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root{
  /* ---- palette : 90% dark / 8% ivory type / 2% silver reflection, no gold ---- */
  --void:        #08080a;
  --obsidian:    #0e0e11;
  --charcoal:    #17171b;
  --charcoal-2:  #202024;
  --ivory:       #efe9df;
  --ivory-dim:   #b9b2a6;
  --ivory-faint: #7c766c;
  --silver:      #cdd1d8;
  --silver-soft: rgba(205,209,216,0.35);
  --silver-glow: rgba(205,209,216,0.55);
  --line:        rgba(239,233,223,0.10);

  --ease-decel:  cubic-bezier(0.16,1,0.3,1);
  --ease-snap:   cubic-bezier(0.87,0,0.13,1);

  --dur-s: 220ms;
  --dur-m: 700ms;
  --dur-l: 1100ms;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--void); scroll-behavior:auto; }
html,body{ height:100%; width:100%; max-width:100vw; }

html,body{
  overflow-x:hidden;
  overscroll-behavior-x:none; /* stops the horizontal rubber-band that exposes bare black past the edge */
}

body{
  background:var(--void);
  color:var(--ivory);
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:380;
  font-size:16px;
  line-height:1.65;
  letter-spacing:0.002em;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

h1,h2,h3,.chapter-word,.hero-name,.nav-brand{
  font-family:'Cinzel', serif;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ivory);
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--silver-soft); color:var(--void); }

@media (max-width:820px){
  body{ cursor:auto; }
}

/* ============================================================
   ATMOSPHERE — grain + vignette, always on top
   ============================================================ */
.grain{
  position:fixed; inset:-10%;
  width:120%; height:120%;
  pointer-events:none;
  z-index:9990;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(8) infinite;
  transition: opacity 1.4s var(--ease-decel);
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 12%{ transform:translate(-2%,1%); }
  24%{ transform:translate(1%,-2%); } 36%{ transform:translate(-1%,2%); }
  48%{ transform:translate(2%,1%); } 60%{ transform:translate(-2%,-1%); }
  72%{ transform:translate(1%,2%); } 84%{ transform:translate(-1%,-2%); }
  100%{ transform:translate(0,0); }
}
.vignette{
  position:fixed; inset:0;
  z-index:9989;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  transition: background 0.6s var(--ease-decel);
}
body.director .vignette{
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.78) 100%);
}
body.director .grain{ opacity:0.09; }

.director-label{
  position:fixed; bottom:22px; right:26px;
  z-index:9995;
  font-family:'Cinzel',serif;
  font-size:0.62rem; letter-spacing:0.32em;
  color:var(--silver);
  opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease-decel);
}
body.director .director-label{ opacity:0.65; }
.director-label.show{ opacity:0.65; }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-glow{
  position:fixed; top:0; left:0;
  width:26px; height:26px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  background:radial-gradient(circle, rgba(220,224,230,0.9) 0%, rgba(220,224,230,0.15) 60%, transparent 75%);
  filter:blur(1px);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-decel), height .35s var(--ease-decel), opacity .35s;
  mix-blend-mode:screen;
}
.cursor-glow.magnet{ width:52px; height:52px; }
body.director .cursor-glow{ opacity:0.5; }
@media (max-width:820px){ .cursor-glow{ display:none; } }

.touch-ripple{
  position:fixed; width:12px; height:12px; border-radius:50%;
  border:1px solid var(--silver-glow);
  transform:translate(-50%,-50%) scale(1);
  pointer-events:none; z-index:9998;
  animation: rippleOut .55s var(--ease-decel) forwards;
}
@keyframes rippleOut{ to{ transform:translate(-50%,-50%) scale(5); opacity:0; } }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition: clip-path 1.1s var(--ease-decel), opacity 1.1s var(--ease-decel);
}
.loader svg{ width:220px; height:6px; overflow:visible; }
.loader .line{
  fill:none; stroke:var(--silver); stroke-width:1;
  stroke-dasharray:220; stroke-dashoffset:220;
  filter:drop-shadow(0 0 6px rgba(205,209,216,0.65));
  animation: drawLine 0.9s var(--ease-decel) forwards 0.15s;
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
.loader-text{
  font-family:'Cinzel',serif; font-size:1.05rem; letter-spacing:0.18em;
  color:var(--ivory); opacity:0; filter:blur(6px); transform:translateY(10px);
  animation: riseBlur 0.8s var(--ease-decel) forwards 0.5s;
}
.loader-sub{
  font-size:0.75rem; letter-spacing:0.14em; color:var(--ivory-faint);
  opacity:0; filter:blur(6px); transform:translateY(10px);
  animation: riseBlur 0.8s var(--ease-decel) forwards 0.68s;
}
@keyframes riseBlur{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }
.loader.hide{
  clip-path: circle(0% at 50% 50%);
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   NAV DOCK
   ============================================================ */
.dock-wrap{
  position:fixed; top:26px; left:50%; transform:translate(-50%,-24px);
  z-index:500;
  opacity:0;
  transition: opacity .9s var(--ease-decel), transform .9s var(--ease-decel);
}
.dock-wrap.in{ opacity:1; transform:translate(-50%,0); }

.dock{
  display:flex; align-items:center; gap:2px;
  padding:8px; border-radius:999px;
  background:rgba(14,14,17,0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:1px solid rgba(205,209,216,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 40px rgba(0,0,0,0.5);
  max-width:92vw; overflow-x:auto; scrollbar-width:none;
}
.dock::-webkit-scrollbar{ display:none; }

.dock a{
  position:relative;
  padding:9px 16px;
  font-size:0.66rem; letter-spacing:0.2em; font-weight:500;
  color:var(--ivory-dim);
  border-radius:999px;
  white-space:nowrap;
  overflow:hidden;
  transition: color .4s var(--ease-decel), transform .4s var(--ease-decel);
}
.dock a::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(239,233,223,0.35) 50%, transparent 70%);
  background-size:220% 100%; background-position:150% 0;
  opacity:0; transition:opacity .3s;
}
.dock a:hover{ color:var(--ivory); transform:translateY(-1px); }
.dock a:hover::before{ opacity:1; animation: sweepDock .9s var(--ease-decel); }
@keyframes sweepDock{ from{ background-position:150% 0; } to{ background-position:-50% 0; } }

.dock a.active{ color:var(--ivory); }
.dock a.active::after{
  content:''; position:absolute; left:16px; right:16px; bottom:5px; height:1px;
  background:var(--silver);
  animation: breatheLine 3.2s ease-in-out infinite;
}
@keyframes breatheLine{ 0%,100%{ opacity:0.35; } 50%{ opacity:0.9; } }

/* ============================================================
   TOP-RIGHT SOUND TOGGLE
   ============================================================ */
.sound-toggle{
  position:fixed; top:30px; right:30px; z-index:500;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(205,209,216,0.2);
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,17,0.4);
  backdrop-filter:blur(10px);
  transition: border-color .4s, transform .3s var(--ease-decel);
}
.sound-toggle:hover{ transform:scale(1.06); border-color:var(--silver); }
.sound-toggle svg{ width:16px; height:16px; }
.bar{ fill:var(--ivory-dim); transition: height .4s var(--ease-decel), fill .4s; transform-origin:bottom; }
.sound-toggle.on .bar{ fill:var(--ivory); animation: pulseBar 1.1s ease-in-out infinite; }
.bar:nth-child(2){ animation-delay:.15s !important; }
.bar:nth-child(3){ animation-delay:.3s !important; }
@keyframes pulseBar{ 0%,100%{ transform:scaleY(0.5); } 50%{ transform:scaleY(1); } }

/* ============================================================
   BACK BUTTON
   ============================================================ */
.back-btn{
  position:fixed; top:30px; left:30px; z-index:500;
  display:flex; align-items:center; gap:10px;
  font-size:0.68rem; letter-spacing:0.2em; color:var(--ivory-dim);
  padding:10px 16px 10px 10px; border-radius:999px;
  border:1px solid rgba(205,209,216,0.16);
  background:rgba(14,14,17,0.4);
  backdrop-filter:blur(10px);
  transition: color .4s var(--ease-decel), border-color .4s, transform .35s var(--ease-decel);
}
.back-btn svg{ width:16px; height:9px; }
.back-btn path{
  stroke:var(--silver); stroke-width:1.2; fill:none;
  stroke-dasharray:26; stroke-dashoffset:26;
  transition: stroke-dashoffset .5s var(--ease-decel);
}
.back-btn:hover{ color:var(--ivory); border-color:var(--silver); transform:translateX(-3px); }
.back-btn:hover path{ stroke-dashoffset:0; }
.back-btn.leaving{ animation: rewindOut .5s var(--ease-snap) forwards; }
@keyframes rewindOut{ to{ opacity:0; transform:translateX(-18px) scale(0.94); filter:blur(4px); } }

/* ============================================================
   PAGE TRANSITION VEIL (fallback for browsers w/o View Transitions)
   ============================================================ */
.veil{
  position:fixed; inset:0; z-index:9997;
  background:var(--void);
  opacity:0; pointer-events:none;
  transition: opacity .8s var(--ease-snap);
}
.veil.show{ opacity:1; pointer-events:all; }
body.page-enter{ animation: pageRiseFromBlack 0.9s var(--ease-decel) both; }
@keyframes pageRiseFromBlack{
  from{ opacity:0; transform:scale(1.03); filter:brightness(0.2); }
  to{ opacity:1; transform:scale(1); filter:brightness(1); }
}
::view-transition-old(root){ animation: outDim .45s var(--ease-snap) both; }
::view-transition-new(root){ animation: pageRiseFromBlack .75s var(--ease-decel) both; }
@keyframes outDim{ to{ opacity:0; transform:scale(0.97); filter:brightness(0.2) saturate(0.7); } }

/* ============================================================
   SECTION / HERO LAYOUT
   ============================================================ */
.scene{ position:relative; min-height:100vh; width:100%; overflow:hidden; }

.hero{
  height:100vh; width:100%;
  display:flex; align-items:flex-end;
  position:relative;
  background:var(--void);
}
.hero-portrait{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-size:cover; background-position:center;
  animation: kenBurns 34s ease-in-out infinite alternate;
  transform:scale(1.06); opacity:0;
  transition: opacity 1.8s var(--ease-decel);
}
.hero-portrait.in{ opacity:1; }
@keyframes kenBurns{ from{ transform:scale(1.0);} to{ transform:scale(1.045);} }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,0.15) 0%, rgba(8,8,10,0.35) 55%, rgba(8,8,10,0.94) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:0 8vw 9vh;
  width:100%;
}
.hero-eyebrow{
  font-size:0.68rem; letter-spacing:0.34em; color:var(--ivory-faint);
  margin-bottom:18px; opacity:0; transform:translateY(10px); filter:blur(4px);
}
.hero-name{
  font-size:clamp(2.6rem, 8vw, 6.4rem);
  line-height:0.98;
  text-shadow: 0 2px 0 rgba(205,209,216,0.12), 0 10px 26px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
  animation: breatheShadow 7s ease-in-out infinite;
}
@keyframes breatheShadow{
  0%,100%{ text-shadow: 0 2px 0 rgba(205,209,216,0.12), 0 10px 26px rgba(0,0,0,0.5); }
  50%{ text-shadow: 0 2px 0 rgba(205,209,216,0.22), 0 16px 40px rgba(0,0,0,0.65); }
}
.hero-name{ max-width:100%; overflow-wrap:break-word; }
.hero-name .line2{ display:block; margin-left:6vw; }
.hero-name .char{ display:inline-block; opacity:0; transform:translateY(30px) rotateX(35deg); filter:blur(6px); }

.hero-caption{
  margin-top:22px; max-width:34ch;
  color:var(--ivory-dim); font-size:0.95rem; font-weight:300;
  opacity:0; transform:translateY(10px); filter:blur(4px);
}
.scroll-cue{
  position:absolute; bottom:28px; left:8vw; z-index:2;
  font-size:0.62rem; letter-spacing:0.28em; color:var(--ivory-faint);
  display:flex; align-items:center; gap:10px;
  opacity:0; transition:opacity 1s var(--ease-decel) 1.6s;
}
.scroll-cue.in{ opacity:0.7; }
.scroll-cue .stem{ width:1px; height:26px; background:linear-gradient(var(--silver), transparent); animation: stemPulse 2.4s ease-in-out infinite; }
@keyframes stemPulse{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

/* Intro overlay (index only) */
.intro{
  position:fixed; inset:0; z-index:9996; background:var(--void);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition: opacity 1s var(--ease-decel);
}
.intro.gone{ opacity:0; pointer-events:none; }
.intro-line{
  font-family:'Cinzel',serif; font-size:clamp(1.3rem,3.4vw,2.2rem);
  letter-spacing:0.06em; color:var(--ivory);
  opacity:0; filter:blur(10px); transform:translateY(0px);
}

/* ============================================================
   GENERIC REVEAL UTILITIES
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); filter:blur(6px); transition: opacity 1s var(--ease-decel), transform 1s var(--ease-decel), filter 1s var(--ease-decel); }
.reveal.in{ opacity:1; transform:translateY(0); filter:blur(0); }
.reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; }

/* ============================================================
   KINETIC TYPOGRAPHY — word-level animated reveal for body copy
   Splitting.js wraps each word in <span class="word">; JS staggers
   .word transition-delay, this block defines the motion itself.
   ============================================================ */
.word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.62em) rotateX(46deg) scale(0.96);
  filter:blur(7px);
  font-weight:230;
  font-variation-settings:'opsz' 14;
  transform-origin:50% 100%;
  transition:
    opacity .85s var(--ease-decel),
    transform .95s var(--ease-decel),
    filter .85s var(--ease-decel),
    font-weight .95s var(--ease-decel);
  will-change: transform, opacity, filter;
}
.whitespace{ display:inline-block; }
.in .word{
  opacity:1;
  transform:translateY(0) rotateX(0) scale(1);
  filter:blur(0);
  font-weight:400;
  font-variation-settings:'opsz' 20;
}
@media (max-width:820px){
  .word{ transform:translateY(0.4em) rotateX(0deg) scale(0.99); filter:blur(4px); }
}
@media (prefers-reduced-motion: reduce){
  .word{ opacity:1; transform:none; filter:none; font-weight:400; transition:none; }
}

.sweep-text{
  background-image:linear-gradient(100deg, var(--ivory) 40%, var(--silver-glow) 50%, var(--ivory) 60%);
  background-size:260% 100%; background-position:150% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: textSweep 2.4s var(--ease-decel) 1;
}
@keyframes textSweep{ from{ background-position:170% 0; } to{ background-position:-70% 0; } }

/* ============================================================
   CHAPTER SCROLL SCENES (about / certificates)
   ============================================================ */
.chapter-bg{
  position:fixed; top:0; left:0;
  width:100vw; height:100vh; height:100dvh;
  z-index:-2;
  background-size:cover; background-position:center;
  transform:scale(1.1);
}
.chapter-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,0.55), rgba(8,8,10,0.88));
}
.chapter{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14vh 8vw; text-align:center; position:relative;
}
.chapter-word{
  font-size:clamp(2.6rem, 11vw, 8rem);
  letter-spacing:0.05em;
  opacity:0.14; transform:scale(0.96) translateY(14px); filter:blur(3px);
  transition: opacity 1.1s var(--ease-decel), transform 1.4s var(--ease-decel), filter 1.1s var(--ease-decel);
}
.chapter-word.in{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
.chapter-eyebrow{
  font-size:0.66rem; letter-spacing:0.34em; color:var(--ivory-faint); margin-bottom:26px;
}
.chapter-body{
  max-width:62ch; margin:34px auto 0; color:var(--ivory-dim); font-size:1.05rem; line-height:2; letter-spacing:0.012em;
}
.chapter-body p{ margin-bottom:0; }

/* ============================================================
   WORKS PAGE
   ============================================================ */
.works-head{ padding:22vh 8vw 6vh; }
.works-list{ padding:0 8vw 14vh; display:flex; flex-direction:column; gap:64px; }
.banner{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid rgba(205,209,216,0.08);
  background:var(--obsidian);
  transition: border-color .5s var(--ease-decel), transform .5s var(--ease-decel);
}
.banner:hover{ border-color:rgba(205,209,216,0.22); transform:translateY(-4px); }

/* wide, uncropped image frame — the shot is shown in full, nothing written over it */
.banner-frame{
  position:relative; width:100%;
  aspect-ratio:16/9; overflow:hidden;
  background:var(--charcoal);
}
.banner-img{
  position:absolute; inset:0; background-size:cover; background-position:center top;
  transition: transform .7s var(--ease-decel), filter .7s var(--ease-decel);
  filter:saturate(0.96) brightness(0.9);
}
.banner:hover .banner-img{ transform:scale(1.045); filter:saturate(1.05) brightness(1); }
.banner-index{
  position:absolute; top:18px; left:18px; z-index:2;
  font-size:0.62rem; letter-spacing:0.24em; color:var(--ivory);
  background:rgba(8,8,10,0.55); padding:7px 14px; border-radius:999px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(205,209,216,0.16);
}

/* clean content panel — sits below the image, never over it */
.banner-content{ position:relative; padding:30px 8vw 38px 32px; }
.banner-title{ font-size:clamp(1.4rem,3vw,2.2rem); }
.banner-tags{ margin-top:8px; font-size:0.72rem; letter-spacing:0.12em; color:var(--ivory-dim); }
.banner-desc{
  margin-top:18px; max-width:70ch;
  color:var(--ivory-dim); font-size:1.02rem; line-height:2; letter-spacing:0.012em;
}
.banner-links{ margin-top:24px; display:flex; gap:16px; flex-wrap:wrap; }
.banner-links a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.66rem; letter-spacing:0.18em; color:var(--ivory);
  padding:11px 22px; border-radius:999px;
  border:1px solid rgba(205,209,216,0.28);
  transition:color .3s, border-color .3s, transform .3s var(--ease-decel);
}
.banner-links a:hover{ border-color:var(--silver); transform:translateY(-2px); }
@media (max-width:820px){ .banner-content{ padding:24px 6vw 30px; } }

/* ============================================================
   SKILLS / INTERESTS GRID PAGES
   ============================================================ */
.grid-head{ padding:22vh 8vw 4vh; max-width:70ch; }
.grid-head p{ color:var(--ivory-dim); margin-top:18px; max-width:52ch; }
.grid-wrap{ padding:2vh 8vw 16vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-cell{
  background:var(--obsidian); padding:34px 28px; position:relative; overflow:hidden;
  transition: background .5s var(--ease-decel);
}
.grid-cell:hover{ background:var(--charcoal); }
.grid-cell .num{ font-size:0.65rem; letter-spacing:0.2em; color:var(--ivory-faint); margin-bottom:16px; }
.grid-cell h3{ font-size:1.15rem; margin-bottom:10px; }
.grid-cell p{ color:var(--ivory-dim); font-size:0.98rem; line-height:1.95; letter-spacing:0.012em; }
.grid-cell .bar-wrap{ margin-top:16px; height:1px; background:rgba(205,209,216,0.12); }
.grid-cell .bar-fill{ height:100%; background:var(--silver); width:0; transition:width 1.4s var(--ease-decel) .1s; }
.grid-cell.in .bar-fill{ width:var(--fill,70%); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12vh 8vw; }
.contact-wrap h1{ font-size:clamp(2rem,6vw,4rem); margin-bottom:20px; }
.contact-wrap p{ color:var(--ivory-dim); font-size:1.05rem; line-height:2; letter-spacing:0.012em; max-width:44ch; margin-bottom:44px; }
.contact-links{ display:flex; flex-direction:column; gap:2px; width:100%; max-width:480px; border-top:1px solid var(--line); }
.contact-links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 6px; border-bottom:1px solid var(--line);
  font-size:0.85rem; letter-spacing:0.08em;
  transition: padding-left .4s var(--ease-decel), color .4s;
  position:relative;
}
.contact-links a span:last-child{ color:var(--ivory-faint); font-size:0.68rem; letter-spacing:0.2em; }
.contact-links a:hover{ padding-left:14px; color:var(--ivory); }

/* ============================================================
   GLOSS BUTTON
   ============================================================ */
.gloss-btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 34px; border:1px solid rgba(205,209,216,0.3); border-radius:999px;
  font-size:0.7rem; letter-spacing:0.24em; color:var(--ivory); overflow:hidden;
  transition: border-color .4s, transform .4s var(--ease-decel);
}
.gloss-btn:hover{ transform:translateY(-2px); border-color:var(--silver); }
.gloss-btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(239,233,223,0.4) 50%, transparent 70%);
  background-size:220% 100%; background-position:160% 0;
}
.gloss-btn:hover::before{ animation: sweepDock 1.1s var(--ease-decel); }

/* ============================================================
   EASTER EGG QUOTE
   ============================================================ */
.egg-quote{
  position:fixed; bottom:14vh; left:50%; transform:translateX(-50%) translateY(10px);
  z-index:600; font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.08em;
  color:var(--ivory-dim); opacity:0; filter:blur(6px); pointer-events:none;
  transition: opacity 1.2s var(--ease-decel), filter 1.2s var(--ease-decel), transform 1.2s var(--ease-decel);
  text-align:center; width:90vw; max-width:480px;
}
.egg-quote.show{ opacity:0.85; filter:blur(0); transform:translateX(-50%) translateY(0); }

/* ============================================================
   NOTES BLOCK — appended narrative paragraphs (skills / interests / home)
   ============================================================ */
.notes-block{ padding:2vh 8vw 14vh; max-width:76ch; }
.notes-block .chapter-eyebrow{ margin-bottom:22px; }
.notes-block p{ color:var(--ivory-dim); font-size:1.02rem; line-height:2; letter-spacing:0.012em; margin-bottom:22px; }
.notes-block p:last-child{ margin-bottom:0; }

.manifesto-line{
  text-align:center; padding:10vh 8vw 12vh;
  font-family:'Cinzel',serif; font-size:clamp(1rem,2.4vw,1.5rem);
  letter-spacing:0.06em; color:var(--ivory); font-style:italic;
}

/* footer */
.foot{ padding:8vh 8vw; text-align:center; color:var(--ivory-faint); font-size:0.68rem; letter-spacing:0.16em; }

@media (max-width:820px){
  .hero-inner{ padding:0 6vw 8vh; }
  .works-list, .grid-wrap, .grid-head, .works-head{ padding-left:6vw; padding-right:6vw; }
  .banner{ height:34vh; }
  .dock a{ padding:8px 12px; font-size:0.6rem; }
  .hero-name .line2{ margin-left:2vw; }
  .hero-name{ font-size:clamp(2.2rem, 11vw, 3.6rem); }
}