/* =========================================================
   RAHUL AWASTHI — PORTFOLIO
   Design system: colors, type, layout, components
========================================================= */

/* Smooth cross-page transitions (Chrome/Edge) — masks the
   reload flash when moving between category pages/tabs.
   No-op in browsers that don't support it (safe fallback). */
@view-transition {
  navigation: auto;
}

@font-face { font-family:'Google Sans'; src:url('../fonts/google-sans-variable.woff2') format('woff2-variations'), url('../fonts/google-sans-variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:block; }
@font-face { font-family:'Google Sans'; src:url('../fonts/google-sans-italic-variable.woff2') format('woff2-variations'), url('../fonts/google-sans-italic-variable.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:block; }

:root{
  --ink:#15171B;
  --paper:#FBFBF9;
  --panel:#F1EFEA;
  --accent:#1E3A5F;
  --accent-soft:#5C7A9B;
  --text:#2A2D33;
  --text-soft:#6E7178;
  --text-faint:#9A9DA3;
  --rule:#E3E1D9;
  --neon:#00f58a;
  --nav-pad:13px;      /* nav vertical padding (keeps the nav height close to the old ~80px with the bigger signature logo) */
  --nav-pad-s:8px;     /* ...and once scrolled */

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'Google Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Google Sans'; font-weight:600; margin:0; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding: var(--nav-pad) 0;
  background:#fff;
  border-bottom:1px solid var(--ink);
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--nav-pad-s) 0;
}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{
  font-family:'Google Sans';
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.2px;
  color:var(--ink);
}
.nav-logo sup{ font-size:0.55em; color:var(--ink); top:-0.6em; }
/* signature logo (transparent PNG, black ink) */
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ display:block; height:56px; width:auto; }
@media (max-width:860px){ .nav-logo img{ height:46px; } }
.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
}
.nav-links a{
  font-size:0.86rem;
  font-weight:500;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
/* thick neon underline: slides in on hover / keyboard focus and stays on the current page */
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-3px;
  height:3px;
  background:var(--neon);
  transition:right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.active::after{ right:0; }
.nav-links a:focus-visible{ outline:none; }
.nav-links a.active{ color:var(--ink); }

.nav-cta{
  font-size:0.82rem;
  font-weight:600;
  color:#fff;
  background:var(--ink);
  padding:10px 20px;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background-color .28s var(--ease), color .28s var(--ease);
}
@media (hover:hover){ .nav-cta:hover{ background:var(--neon); color:var(--ink); } }

.nav-burger{
  display:none;
  width:34px; height:34px;
  position:relative;
  z-index:210;
}
.nav-burger span{
  position:absolute; left:6px; right:6px; height:1.6px; background:var(--ink);
  transition: transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease);
}
.nav-burger span:nth-child(1){ top:13px; }
.nav-burger span:nth-child(2){ top:20px; }
.nav-burger.open span{ background:#fff; }
.nav-burger.open span:nth-child(1){ top:16.5px; transform:rotate(45deg); }
.nav-burger.open span:nth-child(2){ top:16.5px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  background:var(--ink);
  z-index:150;
  display:flex; flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  padding: 0 var(--gutter);
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  font-family:'Google Sans';
  font-size:2.2rem;
  font-weight:600;
  color:var(--paper);
}
.mobile-menu .mm-sub{
  margin-top:24px;
  font-size:0.85rem;
  color:#9AA0A8;
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.88rem;
  font-weight:600;
  padding:15px 28px;
  border-radius:100px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-outline{ background:transparent; color:var(--ink); box-shadow: inset 0 0 0 1.3px var(--rule); }
/* neon hover (hover-capable devices) + keyboard focus */
@media (hover:hover){
  .btn:hover{ background:var(--neon); color:var(--ink); }
  .btn-outline:hover{ box-shadow: inset 0 0 0 1.3px var(--neon); }
}
.btn:focus-visible{ background:var(--neon); color:var(--ink); outline:2px solid var(--ink); outline-offset:3px; }
.btn .arrow{ transition: transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.magnetic{ position:relative; }

/* =========================================================
   SECTIONS / TYPE UTILITIES
========================================================= */
section{ position:relative; }
.eyebrow{
  font-size:0.8rem;
  font-weight:500;
  color:var(--text-faint);
}
.mono{ font-family:'Google Sans', monospace; letter-spacing:0.5px; }
.h-display{
  font-size:clamp(2.8rem, 7vw, 5.4rem);
  line-height:1.14;
  letter-spacing:-1.5px;
  font-weight:700;
}
.h-section{
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing:-0.5px;
  line-height:1.15;
}
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  line-height:1.6;
  color:var(--text-soft);
  max-width:640px;
}

/* reveal-on-scroll base state (GSAP will animate to visible) */
.reveal{ opacity:0; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  padding: 90px 0 34px;
  border-top:1px solid var(--rule);
  margin-top:140px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:40px;
  padding-bottom:56px;
}
.footer-cta{
  font-family:'Google Sans';
  font-size:clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing:-1px;
  max-width:620px;
}
.footer-cta a{ text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--rule); }
.footer-cta a:hover{ text-decoration-color:var(--neon); }
.footer-cols{
  display:flex;
  gap:64px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--text-faint);
  margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:0.92rem;
  color:var(--text-soft);
  margin-bottom:8px;
}
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:26px;
  border-top:1px solid var(--rule);
  font-size:0.78rem;
  color:var(--text-faint);
  flex-wrap:wrap;
  gap:10px;
}
.footer-legal{ max-width:760px; }
.footer-disclaimer{
  margin:10px 0 0;
  font-size:0.74rem;
  line-height:1.65;
  color:var(--text-faint);
}

/* =========================================================
   CURSOR (desktop only)
========================================================= */
.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  z-index:400;
  transform:translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
}
.cursor-dot.big{ width:64px; height:64px; background:rgba(21,23,27,0.08); }
@media (max-width:860px), (hover:none){ .cursor-dot{ display:none; } }

/* =========================================================
   CATEGORY TILE GRID
========================================================= */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tile{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio: 1/1;
  background:var(--panel);
}
.tile-row-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin-bottom:20px;
}
.tile-row-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:20px;
}
.tile-row-3:last-child, .tile-row-2:last-child{ margin-bottom:0; }
.tile-row-2 .tile{ aspect-ratio:16/9; }
.tile-row-3 .tile{ aspect-ratio:1/1; }
@media (max-width:900px){
  .tile-row-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .tile-row-2{ grid-template-columns:1fr; }
  .tile-row-2 .tile{ aspect-ratio:4/3; }
  .tile-row-3{ grid-template-columns:1fr; }
}
.tile-media{ position:absolute; inset:0; overflow:hidden; }
.tile-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.tile-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,12,15,0.62) 100%);
}
.tile-label{
  position:absolute;
  left:22px; right:22px; bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  color:#fff;
  z-index:2;
}
.tile-label span:first-child{
  font-family:'Google Sans';
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-0.2px;
}
.tile-count{ font-size:0.78rem; color:rgba(255,255,255,0.7); }

@media (max-width:900px){
  .tile-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  .tile-grid{ grid-template-columns: 1fr; gap:16px; }
}

/* =========================================================
   GALLERY (category pages)
========================================================= */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items:start;
}
.gallery-cell.wide{ grid-column: span 2; }
.gallery-item{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:var(--panel);
}
.gallery-item img{
  width:100%;
  height: clamp(210px, 24vw, 360px);
  object-fit:cover;
  transition: transform .6s var(--ease);
  display:block;
}
.gallery-item:hover img{ transform:scale(1.05); }
/* subtle scrim so white/light-bg images separate from the page background;
   clears fully on hover */
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,0.1);
  transition:background .3s ease;
  pointer-events:none;
}
.gallery-item:hover::after{ background:rgba(0,0,0,0); }

@media (max-width:900px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .gallery-cell.wide{ grid-column: span 2; }
  .gallery-item img{ height: clamp(180px, 34vw, 300px); }
}
@media (max-width:560px){
  .gallery{ grid-template-columns: 1fr; }
  .gallery-cell.wide{ grid-column: span 1; }
  .gallery-item img{ height: clamp(200px, 55vw, 320px); }
}

.lightbox{
  position:fixed; inset:0;
  background:rgba(12,13,15,0.94);
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:86vw; max-height:84vh; border-radius:6px; }
.lightbox button{
  position:absolute;
  color:#fff; font-size:1.6rem;
  background:rgba(255,255,255,0.08);
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, color .25s ease;
}
@media (hover:hover){ .lightbox button:hover{ background:var(--neon); color:var(--ink); } }
.lb-close{ top:26px; right:26px; font-size:1.1rem; }
.lb-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lb-next{ right:26px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .lb-prev, .lb-next{ width:40px; height:40px; }
}

/* =========================================================
   ACCORDION (CV page)
========================================================= */
.acc-row{
  border-bottom:1px solid var(--rule);
}
.acc-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding: 26px 0;
  cursor:pointer;
}
.acc-head-main{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.acc-org{ font-family:'Google Sans'; font-weight:600; font-size:1.15rem; color:var(--ink); }
.acc-role{ font-size:0.9rem; color:var(--accent-soft); font-weight:500; }
.acc-years{ font-size:0.8rem; color:var(--text-faint); white-space:nowrap; }
.acc-plus{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--rule);
  position:relative;
  flex-shrink:0;
  transition: transform .4s var(--ease), background .3s ease;
}
.acc-plus::before, .acc-plus::after{
  content:"";
  position:absolute; left:50%; top:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
}
.acc-plus::before{ width:9px; height:1.3px; }
.acc-plus::after{ width:1.3px; height:9px; transition:opacity .3s ease; }
.acc-row.open .acc-plus{ background:var(--ink); transform:rotate(180deg); }
.acc-row.open .acc-plus::before, .acc-row.open .acc-plus::after{ background:var(--paper); }
.acc-row.open .acc-plus::after{ opacity:0; }
.acc-body{ height:0; overflow:hidden; }
.acc-body p{ padding: 0 0 26px; max-width:680px; color:var(--text-soft); font-size:0.96rem; line-height:1.65; }

/* =========================================================
   SKILLS GRID (CV page)
========================================================= */
.skill-block{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:16px;
  padding: 16px 0;
  border-bottom:1px solid var(--rule);
}
.skill-block:last-child{ border-bottom:none; }
.skill-block h4{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--text-faint);
  font-family:'Google Sans';
}
.skill-block p{ color:var(--text); font-size:0.98rem; line-height:1.7; }

/* =========================================================
   CONTACT FORM
========================================================= */
.form-field{ margin-bottom:26px; }
.form-field label{
  display:block;
  font-size:0.82rem;
  color:var(--text-faint);
  margin-bottom:8px;
}
.form-field input, .form-field textarea{
  width:100%;
  border:none;
  border-bottom:1.4px solid var(--rule);
  background:transparent;
  font-family:'Google Sans';
  font-size:1.05rem;
  color:var(--ink);
  padding:10px 2px;
  transition:border-color .3s ease;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none;
  border-color:var(--ink);
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-status{ margin-top:16px; font-size:0.9rem; min-height:1.4em; }
.form-status.ok{ color:#2E6B4F; }
.form-status.err{ color:#B23A2F; }

.contact-detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--rule);
}
.contact-detail-row:first-child{ padding-top:0; }
.contact-detail-row .k{ color:var(--text-faint); font-size:0.85rem; }
.contact-detail-row .v{ font-family:'Google Sans'; font-weight:500; font-size:1.05rem; }
.contact-detail-row .v:hover{ color:var(--accent); }

/* =========================================================
   INTRO REVEAL PARAGRAPH (scroll-linked word reveal)
========================================================= */
.reveal-para{
  font-family:'Google Sans';
  font-weight:600;
  font-size:clamp(1.5rem, 3.2vw, 2.3rem);
  line-height:1.4;
  letter-spacing:-0.3px;
  max-width:1000px;
  color:var(--ink);
}
.reveal-para .word{ opacity:0.2; }

/* =========================================================
   PUBLICATION LOGO TICKER (auto-scroll marquee)
========================================================= */
.ticker{
  overflow:hidden;
  margin-top:56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-fade{
  opacity:0;
  animation: tickerFadeIn 0.9s ease forwards;
  animation-delay: 0.2s;
}
@keyframes tickerFadeIn{
  to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-fade{ animation:none; opacity:1; }
}
.ticker-track{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track img{
  height:26px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
  opacity:0.55;
  filter:grayscale(1);
}
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   MOBILE-ONLY HOME PAGE TWEAKS (desktop untouched)
========================================================= */
@media (max-width:640px){
  /* 1. Hero h1 30% bigger, 2. shifted 30px down */
  .hero-copy h1.h-display{
    font-size:clamp(2.21rem, 9.1vw, 4.68rem) !important;
    margin-top:30px !important;
  }
  /* 3. Reduce gap between h1 and hero-meta buttons by 10px (32px -> 22px) */
  .hero-meta{
    margin-top:22px !important;
  }
  /* 2. Shift intro paragraph 30px up */
  .reveal-para{
    transform:translateY(-30px);
  }
  /* 4. Ticker fix, take 2. The pure-CSS `@keyframes` marquee is simply not
     getting driven on this phone's mobile Chrome at all (confirmed: fully
     static across multiple seconds, not just a repaint glitch) — this is a
     known class of bug where mobile browsers silently fail to run infinite
     `animation` on a flex child sized by `width:max-content`. Rather than
     keep patching the CSS animation, the scroll is now driven by GSAP
     (already loaded on this page) purely on mobile — see main.js. GSAP
     updates the transform every frame via JS/rAF instead of relying on the
     browser's own animation engine, so it can't hit this bug. The old CSS
     keyframe animation is switched off on mobile so it can't fight with
     GSAP's version; desktop keeps the original CSS animation, untouched.
     The mask-image is also dropped on mobile in favour of two gradient
     pseudo-elements for the same fade edges — harmless either way, but
     removes one more variable. */
  .ticker{
    -webkit-mask-image:none !important;
    mask-image:none !important;
    position:relative;
  }
  .ticker::before,
  .ticker::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:48px;
    z-index:2;
    pointer-events:none;
  }
  .ticker::before{ left:0;  background:linear-gradient(90deg, var(--paper), rgba(251,251,249,0)); }
  .ticker::after{ right:0; background:linear-gradient(270deg, var(--paper), rgba(251,251,249,0)); }
  .ticker-track{
    animation:none !important;
  }
}

/* =========================================================
   CATEGORY SWITCHER (work/category pages) — tabs
========================================================= */
.cat-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 34px;
  border-bottom:1px solid var(--rule);
}
.cat-tab, .cat-pill{
  font-family:'Google Sans';
  font-weight:600;
  font-size:0.92rem;
  color:var(--text-soft);
  padding:12px 2px 16px;
  position:relative;
  white-space:nowrap;
  transition:color .2s ease;
}
.cat-tab::after, .cat-pill::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:transparent;
  transition:background .2s ease;
}
.cat-tab:hover, .cat-pill:hover{ color:var(--neon); }
.cat-tab.active, .cat-pill.active{ color:var(--neon); }
.cat-tab.active::after, .cat-pill.active::after{ background:var(--ink); }

@media (max-width:640px){
  .cat-tabs{
    flex-wrap:nowrap;
    gap:28px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cat-tabs::-webkit-scrollbar{ display:none; }
}

.cat-nav-arrow{
  color:var(--text-faint);
  font-size:1.1rem;
  transition: color .2s ease;
}
.cat-nav-arrow:hover{ color:var(--ink); }

/* =========================================================
   HOMEPAGE HERO — copy + visual side by side (desktop),
   visual first, then copy (mobile)
========================================================= */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:28px;
  align-items:center;
}
.hero-visual{
  position:relative;
  width:100%;
  max-width:816px;
  margin:0 auto;
  transform:translateX(20px);
}
.hero-video-frame{
  border-radius:12px;
  overflow:hidden;
  transform:translateZ(0);
  aspect-ratio: 1280/720;
}
.hero-bg-video{
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  margin:-2px;
  display:block;
  pointer-events:none;
  object-fit:cover;
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:0; }
  .hero-visual{ order:-1; max-width:480px; margin:0 auto; transform:none; }
  .hero-copy{ margin-top:30px; }
  .hero-meta{ margin-top:48px !important; }
}

/* =========================================================
   GALLERY — "Live Demo" caption link (website screenshots)
========================================================= */
/* =========================================================
   GALLERY — "Live Demo" hover overlay (website/newsletter shots)
========================================================= */
.demo-overlay{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,15,0.55);
  opacity:0;
  transition:opacity .3s ease;
}
.gallery-item:hover .demo-overlay{ opacity:1; }
.demo-overlay span{
  font-family:'Google Sans';
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.3px;
  color:#fff;
  transform:scale(0.92);
  transition:transform .3s ease;
}
.gallery-item:hover .demo-overlay span{ transform:scale(1.08); }

/* Standardise pre-footer spacing on mobile across every page —
   the fixed 140px margin/90px padding was too large for small screens */
@media (max-width:640px){
  .site-footer{ margin-top:60px; padding-top:50px; }
}

/* =========================================================
   HERO ENTRANCE — pure CSS, zero JS dependency.
   (GSAP .from() used to set an inline hidden starting state
   immediately, then animate it back only once its timeline
   played; if that timeline ever stalled on a real device,
   the element stayed permanently hidden. These run purely
   off the CSS engine, so they can never get stuck.)
========================================================= */
.hero-line-anim{
  display:block;
  animation: heroLineIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: 0.15s;
}
@keyframes heroLineIn{
  from{ transform: translateY(110%); }
  to{ transform: translateY(0); }
}

.hero-sub{
  animation: heroFadeUp 0.8s ease both;
  animation-delay: 0.45s;
}
.hero-meta{
  animation: heroFadeUp 0.8s ease both;
  animation-delay: 0.55s;
}
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.nav{
  animation: navFadeDown 0.6s ease both;
}
@keyframes navFadeDown{
  from{ opacity:0; transform:translateY(-30px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-line-anim, .hero-sub, .hero-meta, .nav{ animation:none; }
}