@import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap');

/* ==================================================================
   SHUVO MIAH — Portfolio index
   ================================================================== */

/* ------------------------------------------------------------------
   (4) COLORS  &  (5) TYPOGRAPHY
   Everything visual is driven by these variables — change them here.
   ------------------------------------------------------------------ */
:root {
  /* (4) COLORS */
  --color-bg:        #F2F2F0;   /* page background (soft off-white)      */
  --color-text:      #1C1C1C;   /* project titles & body text            */
  --color-muted:     #8A8A86;   /* section headings, secondary text      */
  --color-line:      #D6D6D2;   /* thin divider lines                    */
  --color-accent:    #F15A23;   /* orange — CMYK 0 80 99 0              */
  --color-header-bg: #1F1F1F;   /* dark charcoal navigation bar          */
  --color-header-fg: #EDEDEA;   /* navigation text                       */
  --color-header-dim:#8C8C88;   /* "Motion Designer + Illustrator" line  */

  /* (5) TYPOGRAPHY */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-project: 0.8125rem;      /* 13px — project titles                 */
  --fs-heading: 0.6875rem;      /* 11px — section headings               */
  --fs-nav:     0.6875rem;      /* 11px — navigation                     */
  --tracking-project: 0.32em;   /* letter spacing — project titles       */
  --tracking-heading: 0.38em;   /* letter spacing — section headings     */
  --tracking-nav:     0.28em;   /* letter spacing — navigation           */
  --fw-regular: 400;
  --fw-light:   300;

  /* LAYOUT */
  --container: 1200px;
  --gutter: clamp(16px, 5vw, 64px);
  --header-h: 68px;
  --section-gap: clamp(96px, 14vw, 180px);
  --row-gap: clamp(22px, 2.6vw, 30px);

  /* MOTION */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

/* image protection (with js/main.js section 5): pictures and films can't
   be dragged out, selected, or long-pressed to save on phones */
img, video, svg, picture {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  color: var(--color-header-fg);
}

/* Three columns: the two 1fr sides are always equal, so the nav sits in
   the true centre of the screen regardless of how wide the logo/name is. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;       /* logo | menu | 4 dots — menu sits by the dots */
  column-gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--gutter);
}

.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1;
}
/* (1) LOGO size — change width/height to fit your logo */
.brand__logo {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.brand__logo--placeholder {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
/* (1) TOP LEFT — SM mark · line · SHUVO MIAH
   At rest only the SM mark shows. On hover (computers only) the mark
   turns coral and plays the next move (js/main.js adds .mv-*), a coral
   line grows in and the name slides out of it. On load the S halves
   slide together and the M springs up. */
.brand { gap: 14px; color: var(--color-header-fg); }
.brand__sm { display: block; flex: none; height: 34px; width: auto; overflow: visible; fill: currentColor; }
.brand__sm g { transform-box: fill-box; transform-origin: center; transition: fill 0.45s ease; }
.brand__line {
  flex: none;
  width: 1px;
  height: 26px;
  background: var(--color-accent);
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.brand__name {
  display: flex;
  overflow: hidden;
  padding: 4px 0 4px 2px;
  font-size: 0.5625rem;                     /* 9px — same size as Work / About / Contact */
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-nav);       /* same type as Work / About / Contact */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-header-fg);
}
.brand__name-in { display: flex; align-items: center; }
.brand__c { display: inline-block; }

/* SHUVO MIAH types itself out after the logo rolls in (js/main.js adds
   .is-typing and marks each letter .is-typed).
   Typing speed is set in js/main.js (TYPE_MS). Same on computer, tablet
   and phone; the rest of the time the name just sits there. */
.is-typing .brand__line { animation: br-line 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.75s both; }
@keyframes br-line { from { transform: scaleY(0); } }
.is-typing .brand__c:not(.is-typed) { opacity: 0; }

/* Small phones: a little smaller so logo + name + menu fit */
@media (max-width: 400px) {
  .brand { gap: 10px; }
  .brand__drip { height: 34px; }
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand__s, .brand:focus-visible .brand__s { fill: var(--color-accent); }
  .brand:hover .brand__m, .brand:focus-visible .brand__m { fill: var(--color-accent); transition-delay: 0.15s; }
  .brand:hover .brand__line, .brand:focus-visible .brand__line { transform: scaleY(1.2); }
}

/* while hovering, SHUVO MIAH flips to শুভ (Bangla) and back (js/main.js) */
.brand__flip { display: grid; }
.brand__flip > * { grid-area: 1 / 1; }
.brand__bn {
  font-family: "Anek Bangla", "Noto Sans Bengali", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.16em;                    /* spaced out like SHUVO MIAH */
  line-height: 1.1;
  text-transform: none;
  align-self: center;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
}
.brand.is-bn .brand__name-in { transform: translateY(-110%); }
.brand.is-bn .brand__bn { opacity: 1; transform: none; }

/* opening on page load */
.is-intro .brand__top { animation: sm-top-in 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.is-intro .brand__bot { animation: sm-bot-in 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.is-intro .brand__m   { animation: sm-m-in 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s both; }
@keyframes sm-top-in { from { transform: translate(28%, -40%); opacity: 0; } }
@keyframes sm-bot-in { from { transform: translate(-28%, 40%); opacity: 0; } }
@keyframes sm-m-in   { from { transform: translateY(60%) scaleY(0.6); opacity: 0; } }

/* a different move on every hover */
.mv-slice .brand__top { animation: sm-slice-top 1s cubic-bezier(0.3, 1.3, 0.5, 1); }
.mv-slice .brand__bot { animation: sm-slice-bot 1s cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes sm-slice-top { 0%, 100% { transform: none; } 40%, 55% { transform: translate(9%, -14%); } }
@keyframes sm-slice-bot { 0%, 100% { transform: none; } 40%, 55% { transform: translate(-9%, 14%); } }
.mv-hop .brand__m { animation: sm-hop 0.9s cubic-bezier(0.37, 0, 0.3, 1); }
@keyframes sm-hop {
  0%, 100% { transform: none; }
  35% { transform: translateY(-34%) scale(0.94, 1.08); }
  62% { transform: translateY(0) scale(1.12, 0.86); }
  80% { transform: scale(0.97, 1.03); }
}
.mv-spin .brand__s { animation: sm-spin 1s cubic-bezier(0.6, 0, 0.3, 1); }
@keyframes sm-spin { to { transform: rotate(360deg); } }
.mv-tilt .brand__sm { animation: sm-tilt 0.9s ease-in-out; transform-origin: 50% 100%; }
@keyframes sm-tilt { 0%, 100% { transform: none; } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }
.mv-bounce .brand__s { animation: sm-bounce 0.9s cubic-bezier(0.5, 0, 0.5, 1); }
@keyframes sm-bounce {
  0%, 100% { transform: none; }
  30% { transform: translateY(-38%); }
  55% { transform: translateY(0) scale(1.1, 0.88); }
  72% { transform: translateY(-10%); }
  86% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand__sm, .brand__sm g, .brand__line, .brand__name-in, .brand__c { animation: none !important; transition: none !important; }
}

/* Live "shuvo" logo pieces — used by the intro screen and the logo
   project page (built by js/main.js, window.ShuvoLogo). */
.brand__word {
  display: block;
  flex: none;
  height: 42px;
  width: auto;
  overflow: visible;
}
.brand__fx {
  display: grid;
  align-items: center;
  height: 56px;
  overflow: hidden;
}
.brand__fx > * { grid-area: 1 / 1; }
.brand__l {
  fill: var(--color-header-fg);
  animation: brand-wave 1.8s ease-in-out calc(var(--i) * -0.22s) infinite;
}
.brand__p {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), fill 0.3s ease;
}
.brand__swash {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;                 /* the round cap would otherwise leave a dot */
  transition: stroke-dashoffset 0.6s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.2s ease;
}
.brand__fullname {
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-header-fg);
  transform: translateY(48px);   /* parked below the box until .fx-name */
}
.brand__word--live,
.brand__fullname { transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
@keyframes brand-wave {
  0%, 100% { transform: translateY(6px); }
  50%      { transform: translateY(-6px); }
}

/* Hover effects — js/main.js adds one per hover, in this order */
.fx-hop .brand__p { animation: brand-hop 0.55s cubic-bezier(0.3, 0, 0.4, 1) calc(var(--i) * 0.08s); }
@keyframes brand-hop {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-24px) rotate(-6deg); }
  70%      { transform: translateY(3px); }
}
.fx-coral .brand__p { fill: var(--color-accent); transition-delay: calc(var(--i) * 70ms); }
.fx-bigwave .brand__l { animation: brand-wave-big 0.7s ease-in-out calc(var(--i) * -0.09s) infinite; }
@keyframes brand-wave-big {
  0%, 100% { transform: translateY(12px); }
  50%      { transform: translateY(-12px); }
}
.fx-scatter .brand__p { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.fx-jelly .brand__word--live { transform-origin: 50% 100%; animation: brand-jelly 0.8s ease-in-out; }
@keyframes brand-jelly {
  0%, 100% { transform: none; }
  15% { transform: scale(1.2, 0.8); }
  30% { transform: scale(0.88, 1.14); }
  45% { transform: scale(1.08, 0.94); }
  60% { transform: scale(0.97, 1.03); }
}
.fx-spin .brand__p {
  transform-origin: 50% 50%;
  transform: rotate(360deg);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.3, 1) calc(var(--i) * 90ms);
}
.fx-swash .brand__swash { stroke-dashoffset: 0; opacity: 1; }
.fx-name .brand__word--live { transform: translateY(-110%); }
.fx-name .brand__fullname { transform: none; }
.fx-lean .brand__p { transform: skewX(var(--lean, 0deg)); transition: transform 0.25s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .brand__l, .brand__p, .brand__word--live, .brand__swash, .brand__fullname { animation: none; transition: none; }
}

/* Centre navigation: Work | About | Contact */
.site-nav { justify-self: end; height: 100%; }
.site-nav__list {
  display: flex;
  align-items: center;
  height: 100%;
}
.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
/* thin vertical separators */
.site-nav__item + .site-nav__item::before {
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 clamp(12px, 1.6vw, 20px);
  background: rgba(255, 255, 255, 0.2);
}

.site-nav__item > a {
  position: relative;
  padding: 6px 0 6px var(--tracking-nav); /* balances trailing letter-spacing */
  color: var(--color-header-dim);
  font-size: 0.5625rem;                   /* 9px — small, sits by the 4 dots */
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
/* hairline that grows from the centre on hover */
.site-nav__item > a::after {
  content: "";
  position: absolute;
  left: calc(var(--tracking-nav) / 2);
  right: calc(var(--tracking-nav) / -2);
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.site-nav__item > a:hover,
.site-nav__item > a[aria-current="page"] { color: var(--color-header-fg); }
.site-nav__item > a:hover::after { transform: scaleX(1); }

/* Grid / menu icon */
.site-header__end { justify-self: end; display: flex; }
.menu-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-header-fg);
  cursor: pointer;
}
.menu-toggle__grid {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 4px;
  transition: transform var(--dur) var(--ease);
}
.menu-toggle__grid i {
  width: 5px;
  height: 5px;
  background: currentColor;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* dots light up one after another, clockwise */
  animation: dot-chase 2.4s var(--ease) infinite backwards;
}
.menu-toggle__grid i:nth-child(1) { animation-delay: 0s; }    /* top-left     */
.menu-toggle__grid i:nth-child(2) { animation-delay: 0.6s; }  /* top-right    */
.menu-toggle__grid i:nth-child(4) { animation-delay: 1.2s; }  /* bottom-right */
.menu-toggle__grid i:nth-child(3) { animation-delay: 1.8s; }  /* bottom-left  */
@keyframes dot-chase {
  0%, 45%, 100% { opacity: 0.35; transform: scale(0.75); }
  15%           { opacity: 1;    transform: scale(1); }
}
/* hover / open: all dots on, in coral */
.menu-toggle:hover .menu-toggle__grid i,
.menu-toggle[aria-expanded="true"] .menu-toggle__grid i {
  animation: none;
  opacity: 1;
  transform: none;
  background: var(--color-accent);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__grid { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__grid i { animation: none; }
}

/* Overlay menu */
.menu-overlay {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.is-open { opacity: 1; }
.menu-overlay__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.menu-overlay a {
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.menu-overlay a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Index sections
   ------------------------------------------------------------------ */
main {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.index-section + .index-section { margin-top: var(--section-gap); }

/* Heading centred over a hairline that runs the full container width */
.index-section__heading {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: 0 0 clamp(56px, 7vw, 88px);
  color: var(--color-muted);
  font-size: var(--fs-heading);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  white-space: nowrap;
}
.index-section__heading::before,
.index-section__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.project-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap);
  text-align: center;
}

.project-link {
  display: inline-block;
  padding: 4px 0;
  /* trailing letter-spacing offset keeps titles optically centred */
  margin-right: calc(var(--tracking-project) * -1);
  font-size: var(--fs-project);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-project);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.project-link:hover,
.project-link:focus-visible { color: var(--color-accent); }

/* ------------------------------------------------------------------
   About / Contact information grid
   ------------------------------------------------------------------ */
.info {
  max-width: var(--container);
  margin: clamp(160px, 20vw, 280px) auto 0;   /* lots of space above: sits near the bottom */
  padding: 0 var(--gutter);
}

.info__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.info__col {
  padding: 22px clamp(20px, 2.6vw, 36px) 24px;
  font-size: 0.75rem;                       /* same type as the project lists */
  letter-spacing: var(--tracking-nav);
  line-height: 1.75;
  text-transform: uppercase;
}
.info__col:first-child { padding-left: 0; }
.info__col + .info__col { border-left: 1px solid var(--color-line); }

.info__name,
.info__heading {
  margin: 0 0 10px;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}
.info__heading { color: var(--color-muted); font-weight: var(--fw-regular); }

.info__meta { margin: 0; color: var(--color-text); }

.info__tagline {
  max-width: 26em;
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-transform: none;
}

.info__list { margin: 0; }
.info__list dt { color: var(--color-muted); }
.info__list dd { margin: 0; }

.info__social { display: grid; gap: 0; }

.info__link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
/* Emails are lowercase by convention */
.info__link[href^="mailto:"] { text-transform: none; letter-spacing: 0.08em; }
.info__link:hover,
.info__link:focus-visible {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration-color: currentColor;
}

.site-footer {
  padding: 48px var(--gutter);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.site-footer p { margin: 0; }

/* ------------------------------------------------------------------
   Floating hover preview (desktop / mouse only)
   ------------------------------------------------------------------ */
.preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-line);
  opacity: 0;
  transform: translate3d(-9999px, 0, 0);
  transition: opacity var(--dur) var(--ease);
  will-change: transform, opacity;
}
.preview.is-visible { opacity: 1; }
.preview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 600ms var(--ease);
}
.preview.is-visible .preview__img { transform: scale(1); }
/* the hover clip (data-video) fades in over the image once it plays */
.preview__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.preview.is-playing .preview__video { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .preview { display: none; }
}

/* ------------------------------------------------------------------
   Touch screens (phone / tablet)
   Thumbnails are added by js/main.js; bigger tap targets throughout.
   ------------------------------------------------------------------ */
.project-link__thumb { display: none; }

@media (hover: none), (pointer: coarse) {
  .project-list { gap: clamp(36px, 6vw, 56px); }

  .project-link--thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(100%, 520px);
    margin-right: 0;
    padding: 0;
  }
  .project-link--thumb .project-link__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-line);
  }

  /* 44px minimum tap height for small text links */
  .project-link { min-height: 44px; }
  .info__social .info__link,
  .info__list .info__link {
    display: inline-block;
    padding: 6px 0;
  }
  .menu-overlay a { display: inline-block; padding: 10px 16px; }
  .menu-toggle { width: 44px; height: 44px; margin-right: -12px; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

/* Tablet */
@media (max-width: 900px) {
  :root {
    --tracking-project: 0.28em;
  }
  .info__grid { grid-template-columns: 1.2fr 1fr 0.8fr; }
  .info__col { padding: 20px 16px 22px; letter-spacing: 0.2em; }
}

/* Small tablet / large phone — centre nav collapses into the grid menu */
@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto; }   /* logo | 4 dots */
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --header-h: 60px;
    --fs-project: 0.75rem;
    --tracking-project: 0.22em;
    --tracking-heading: 0.3em;
  }
  .brand__sm { height: 30px; }
  .index-section__heading { gap: 16px; }
  .project-link { padding: 6px 0; }

  /* Info grid stacks; vertical dividers become horizontal ones */
  .info__grid { grid-template-columns: 1fr; }
  .info__col { padding: 18px 0 20px; }
  .info__col + .info__col {
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
  .info__tagline { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------------------------
   Work page (homepage) typography — project titles use the menu's
   type (Inter, uppercase, wide spacing) and turn bold on hover;
   DM Mono for section headings.
   ------------------------------------------------------------------ */
.home-page .project-link {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  line-height: 1.5;
  padding: 6px 0;
  margin-right: calc(var(--tracking-nav) * -1);
  transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
}
.home-page .project-link:hover,
.home-page .project-link:focus-visible { font-weight: 600; }
/* a title with no page yet (<span class="project-link is-empty">): no hover */
.project-link.is-empty { cursor: default; }
.project-link.is-empty:hover { color: inherit; }
.home-page .project-link.is-empty:hover { font-weight: 400; }
.home-page .index-section__heading {
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------
   Intro — white screen with the spinning skateboard bearing.
   Sits under the header (header stays visible); clicking it reveals
   the homepage (js/main.js, section 0).
   ------------------------------------------------------------------ */
.has-intro body { overflow: hidden; }
.intro {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 80;                       /* below the header and the menu overlay */
  display: grid;
  place-items: center;
  background: var(--color-bg);       /* same off-white as the page (the video matches it) */
  cursor: pointer;
  overflow: hidden;                  /* keeps the grain layer inside */
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}
.intro__bearing {
  width: min(472px, max(46vmin, 60vw), 70vh);   /* phone ≈ 60% width, desktop up to 472px */
  height: auto;
  transition: transform 0.7s var(--ease), opacity 0.5s ease 0.45s;   /* fades in after the logo has gone */
}
.intro:focus-visible { outline: none; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro:not(.is-leaving) { transition: opacity 0.7s var(--ease), visibility 0s; }   /* fade back in (screensaver) */
.intro.is-leaving .intro__bearing { transform: scale(1.15); }

/* The bearing shows for 10 s, then "shuvo" takes over (js/main.js, section 0):
   both sit in the same spot and crossfade. The logo is drawn like a pen,
   filled coral, then waves softly; it redraws each time it comes back. */
.intro > .intro__bearing,
.intro > .intro__logo { grid-area: 1 / 1; }
.intro__logo { width: min(480px, 72vw); height: auto; overflow: visible; transition: opacity 0.45s ease; }
.intro:not(.show-logo) .intro__logo { opacity: 0; }
.intro.show-logo .intro__logo { transition: opacity 0.5s ease 0.45s; }
.intro.show-logo .intro__bearing { opacity: 0; transform: scale(0.96); transition: opacity 0.45s ease, transform 0.7s var(--ease); }
/* = a film "dip": one fades out to paper, then the next fades in */

/* Film look: fine moving grain + a soft vignette over the whole screen */
.intro::before,
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.intro::before {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(28, 28, 28, 0.10) 100%);
}
.intro::after {
  inset: -50%;
  opacity: 0.09;
  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 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: film-grain 0.9s steps(6) infinite;
}
@keyframes film-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-4%, -3%); }
  80%  { transform: translate(7%, 6%); }
  100% { transform: translate(0, 0); }
}
.intro__logo .il-p {
  fill: transparent;
  stroke: var(--color-text);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: il-draw 1.8s cubic-bezier(0.5, 0, 0.3, 1) calc(0.75s + var(--i) * 0.18s) forwards,   /* starts once faded in */
             il-fill 0.7s ease calc(2.75s + var(--i) * 0.08s) forwards;
}
.intro__logo .il-g { animation: brand-wave 1.8s ease-in-out calc(3.85s - var(--i) * 0.22s) infinite; }
@keyframes il-draw { to { stroke-dashoffset: 0; } }
@keyframes il-fill { to { fill: var(--color-accent); stroke-width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro, .intro__bearing { transition: none; }
  .intro__logo .il-p, .intro__logo .il-g { animation: none; fill: var(--color-accent); stroke-width: 0; }
  .intro__logo { display: none; }   /* no taking turns: just the still bearing */
  .intro::after { animation: none; }
}

/* (1) TOP LEFT — illustrated "shuvo" drip logo (home page)
   Change the height to make it bigger or smaller.
   On load the letters pop up one by one and the drips fall out of them.
   At rest the drips swing gently all the time, and each one slowly
   oozes down and snaps back (staggered).
   On hover (computers only) it rolls in again — js/main.js re-adds
   .is-intro to .brand. */
.brand__drip { display: block; flex: none; height: 42px; width: auto; overflow: visible; color: var(--color-accent); fill: currentColor; }
.brand__drip g { transform-box: fill-box; }
.brand__drip .dl-line path { fill: none; stroke: currentColor; stroke-linecap: round; }
.dl-l    { transform-origin: 50% 100%; }
.dl-drip, .dl-sway { transform-origin: 50% 0; }   /* swing from where they leave the letter */
.dl-line { transform-origin: 50% 0; }
.dl-dot  { transform-origin: 50% 0; }

/* Opening (and every hover) — letters roll in from the left like balls, then the drips fall */
.is-intro .dl-l    { transform-origin: 50% 50%; animation: dl-roll 1s cubic-bezier(0.2, 0.8, 0.3, 1) calc((3 - var(--i)) * 90ms) both; }
.is-intro .dl-line { animation: dl-grow 0.35s cubic-bezier(0.5, 0, 0.75, 0) calc(1s + var(--i) * 140ms) both; }
.is-intro .dl-dot  { animation: dl-fall 0.8s linear calc(1s + var(--i) * 140ms) both; }
@keyframes dl-roll {
  0%   { transform: translateX(-420%) rotate(-540deg); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateX(6%) rotate(12deg); }
  85%  { transform: translateX(-2%) rotate(-4deg); }
  100% { transform: none; }
}
@keyframes dl-grow { from { transform: scaleY(0); } }
@keyframes dl-fall {
  0%   { transform: translateY(-120%) scale(0); }
  40%  { transform: translateY(0) scale(0.9, 1.2); }
  55%  { transform: translateY(18%) scale(1.25, 0.8); }
  72%  { transform: translateY(-10%) scale(0.92, 1.08); }
  88%  { transform: translateY(3%) scale(1.04, 0.97); }
  100% { transform: none; }
}

/* At rest: the drips swing like pendulums all the time (each slightly
   out of step), and each oozes down and springs back, one after another.
   Change 16deg for a bigger / smaller swing, 1.6s for faster / slower. */
@media (prefers-reduced-motion: no-preference) {
  .dl-sway { animation: dl-sway 1.6s cubic-bezier(0.37, 0, 0.63, 1) calc(var(--i) * -0.5s) infinite alternate; }
  .dl-line { animation: dl-ooze-line 7s ease-in-out calc(1.5s + var(--i) * 2.3s) infinite; }
  .dl-dot  { animation: dl-ooze-dot  7s ease-in-out calc(1.5s + var(--i) * 2.3s) infinite; }
}
@keyframes dl-sway {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}
@keyframes dl-ooze-line {
  0%, 62%, 100% { transform: none; }
  80% { transform: scaleY(var(--grow)); }
  87% { transform: scaleY(0.93); }
  93% { transform: scaleY(1.03); }
}
@keyframes dl-ooze-dot {
  0%, 62%, 100% { transform: none; }
  76% { transform: translateY(40px) scale(0.92, 1.12); }
  80% { transform: translateY(45px) scale(0.95, 1.1); }
  87% { transform: translateY(-5px) scale(1.18, 0.86); }
  93% { transform: translateY(2px) scale(0.97, 1.03); }
}


/* ------------------------------------------------------------------
   Home intro — the big drip logo rolls in from the left, the drips fall,
   then it stays in the middle swinging until a click / tap enters the
   site (js/main.js, section 0). Replays when the screensaver comes back.
   The top-left header logo is not touched by this.
   ------------------------------------------------------------------ */
.intro > .intro__bearing { display: none; }   /* replaced by the drip logo */
.intro > .intro__drip { grid-area: 1 / 1; }
/* Shots on a loop (js/main.js): drip logo (5 s) → Love Link's last shot →
   logo → the first part of the skateboard film, each film in slow motion
   (.show-film) with slow crossfades */
.intro > .intro__logo { display: none; }
.intro.show-film .intro__drip { opacity: 0; }
.intro__drip { transition: opacity 0.45s ease, transform 0.7s var(--ease); }
.intro__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease, transform 0s 0.9s; }
/* each film slowly pushes in while it plays (resets after the fade out) */
.intro.show-film .intro__film.is-on { opacity: 1; transform: scale(1.07); transition: opacity 0.9s ease, transform 5.5s cubic-bezier(0.25, 0.1, 0.35, 1); }
/* "Filmmaker — Love Link →" over the film, bottom left */
.intro__tag {
  position: absolute; left: var(--gutter); bottom: clamp(28px, 6vh, 56px); z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--color-header-fg); font-size: var(--fs-nav); letter-spacing: var(--tracking-nav); text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}
.intro.show-tag .intro__tag { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.7s ease 0.8s, transform 0.9s var(--ease) 0.8s; }
.intro__tag-new { display: inline-flex; align-items: center; gap: 10px; color: var(--color-accent); }
.intro__tag-new::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: intro-pulse 1.6s ease-in-out infinite; }
.intro__tag-title { font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: 0.32em; font-weight: var(--fw-light); }
.intro__tag-title span { display: inline-block; transition: transform var(--dur) var(--ease); }
.intro__tag:hover .intro__tag-title span { transform: translateX(6px); }
@keyframes intro-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.intro__drip { width: min(680px, 84vw); height: auto; overflow: visible; color: var(--color-accent); fill: currentColor; }
.intro__drip g { transform-box: fill-box; }
.intro__drip .dl-line path { fill: none; stroke: currentColor; stroke-linecap: round; }
.intro.is-leaving .intro__drip { transform: scale(1.15); }
.intro.is-rolling .intro__drip .dl-l    { transform-origin: 50% 50%; animation: intro-roll 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) calc((3 - var(--i)) * 120ms) both; }
.intro.is-rolling .intro__drip .dl-line { animation: dl-grow 0.35s cubic-bezier(0.5, 0, 0.75, 0) calc(1.5s + var(--i) * 140ms) both; }
.intro.is-rolling .intro__drip .dl-dot  { animation: dl-fall 0.8s linear calc(1.5s + var(--i) * 140ms) both; }
@keyframes intro-roll {
  0%   { transform: translateX(-520%) rotate(-720deg); opacity: 0; }
  20%  { opacity: 1; }
  72%  { transform: translateX(6%) rotate(12deg); }
  86%  { transform: translateX(-2%) rotate(-4deg); }
  100% { transform: none; }
}

/* Home intro colour — same black as the top bar, so header and intro read
   as one dark screen with the orange logo on it */
.intro { background: var(--color-header-bg); }
.intro::before { background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.35) 100%); }
.intro::after { opacity: 0.16; filter: invert(1); }

/* ------------------------------------------------------------------
   Home intro — the logo cradle (js/main.js, section 0). The letters
   swing from a point above, orange on the charcoal intro; each hit
   bursts a piece of moving work full screen out of the letter.
   ------------------------------------------------------------------ */
.intro > .intro__drip, .intro > .intro__film, .intro > .intro__tag { display: none; }   /* the old intro pieces */
.intro__cradle {
  grid-area: 1 / 1;
  width: min(92vw, 150vh);
  height: auto;
  overflow: visible;
  fill: var(--color-accent);
}
/* the work, full screen, opening out of the letter that hit */
.intro__pop { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; }
.intro__pop video, .intro__pop img { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.intro__pop .is-contained { object-fit: contain; background: #61cde3; }
.intro__pop figcaption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(24px, 5vh, 48px);
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-heading);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* the hit: a ring that bursts where the letters touch */
.intro__impact {
  position: absolute;
  z-index: 3;
  width: 9vmin;
  height: 9vmin;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
}

/* final logo (no drips): same letter size as before, tighter box */
.brand__drip--final { height: 33px; }
@media (max-width: 400px) { .brand__drip--final { height: 27px; } }

/* Home intro — the work each cradle hit starts (js/main.js, section 0):
   one piece at a time, behind the logo, whole frame (no crop) */
.intro__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.intro__piece { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.45s ease; }
.intro__piece.is-on { opacity: 1; transition-duration: 0.3s; }
.intro__piece video, .intro__piece img { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro__piece figcaption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(24px, 5vh, 48px);
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-heading);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.intro__cradle { position: relative; z-index: 2; }
/* while a piece plays, a soft shadow keeps the orange logo readable on it */
.intro__cradle { transition: filter 0.3s ease; }
.intro.has-piece .intro__cradle { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }

/* ------------------------------------------------------------------
   Black site, like the homepage intro's film page: every page reads
   these tokens, so flipping them turns the whole site dark.
   ------------------------------------------------------------------ */
:root {
  --color-bg:    #0b0b0b;   /* page background (near black, as the film page) */
  --color-text:  #F2F2F0;   /* text: the old off-white background            */
  --color-muted: #8A8A86;   /* labels stay the same grey                     */
  --color-line:  #2A2A2A;   /* thin divider lines                            */
}
/* image placeholders (shown while photos load) go dark too */
.pj-hero, .pj-related__img, .pj-gallery figure { background: #141414; }