/* ============================================================
   VRUSHYAM GALLERY — photo-only page, 4 animated structures
   Requires: assets/site-shell.css
   ============================================================ */
:root{
  --g-ease: cubic-bezier(.22,.9,.3,1);
}

.wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
.band{padding:clamp(56px,7vw,96px) 0;}
.band-alt{background:var(--bg2);}

.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.55rem; font-weight:600;
}
.eyebrow i{width:8px; height:8px; border-radius:50%; background:linear-gradient(120deg,var(--accent),var(--accent2)); flex:none;}
.h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; letter-spacing:-.02em; margin:.7rem 0 .6rem;}
.sub{color:var(--text2); max-width:560px; font-size:.98rem; line-height:1.7;}

.rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--g-ease), transform .7s var(--g-ease);}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;}

img{display:block; max-width:100%;}

/* ---------- HERO ---------- */
.g-hero{padding:160px 0 40px; text-align:center;}
@media (max-width:768px){.g-hero{padding-top:120px;}}
.g-hero h1{
  font-size:clamp(2.6rem,6.5vw,4.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.05;
}
.g-hero h1 .word{
  display:inline-block; opacity:0; transform:translateY(40px);
  animation:wordup .8s var(--g-ease) forwards;
}
.g-hero h1 .word:nth-child(2){animation-delay:.12s;}
.g-hero h1 .word:nth-child(3){animation-delay:.24s;}
.g-hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
@keyframes wordup{to{opacity:1; transform:none;}}
.g-hero .sub{margin:1.1rem auto 0;}

/* ---------- 01 · FILM STRIP (dual marquee) ---------- */
.strip{overflow:hidden; padding:34px 0 10px;}
.strip-track{display:flex; gap:16px; width:max-content; animation:stripL 42s linear infinite;}
.strip-track.rev{animation:stripR 48s linear infinite; margin-top:16px;}
.strip:hover .strip-track{animation-play-state:paused;}
@keyframes stripL{to{transform:translateX(-50%);}}
@keyframes stripR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.strip-card{
  flex:none; width:300px; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:var(--card);
  transition:transform .35s var(--g-ease), box-shadow .35s;
}
.strip-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--g-ease);}
.strip-card:hover{transform:translateY(-6px) scale(1.02); box-shadow:var(--glow); z-index:2;}
.strip-card:hover img{transform:scale(1.08);}
@media (max-width:600px){.strip-card{width:220px;}}

/* ---------- 02 · MASONRY REVEAL ---------- */
.masonry{columns:3 300px; column-gap:18px; margin-top:44px;}
.m-item{
  break-inside:avoid; margin-bottom:18px; border-radius:18px; overflow:hidden; position:relative;
  border:1px solid var(--border); cursor:zoom-in;
  opacity:0; transform:translateY(34px) scale(.97);
  transition:opacity .7s var(--g-ease), transform .7s var(--g-ease), box-shadow .35s;
}
.m-item.in{opacity:1; transform:none;}
.m-item:hover{box-shadow:var(--glow);}
.m-item img{width:100%; transition:transform .6s var(--g-ease);}
.m-item:hover img{transform:scale(1.06);}
.m-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(5,10,20,.72));
  opacity:0; transition:opacity .4s;
}
.m-item:hover::after{opacity:1;}
.m-item .cap{
  position:absolute; left:16px; bottom:12px; z-index:2; color:#fff; font-weight:600; font-size:.85rem;
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s var(--g-ease);
}
.m-item:hover .cap{opacity:1; transform:none;}

/* ---------- 03 · PARALLAX COLUMNS ---------- */
.para{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; overflow:visible;}
@media (max-width:760px){.para{grid-template-columns:repeat(2,1fr);} .p-col:nth-child(3){display:none;}}
.p-col{display:grid; gap:18px; will-change:transform;}
.p-col:nth-child(2){margin-top:44px;}
.p-col:nth-child(3){margin-top:88px;}
.p-card{border-radius:18px; overflow:hidden; border:1px solid var(--border); cursor:zoom-in;}
.p-card img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--g-ease);}
.p-card:hover img{transform:scale(1.06);}

/* ---------- 04 · SPOTLIGHT (3D tilt on hover) ---------- */
.spot{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; perspective:1100px;}
@media (max-width:860px){.spot{grid-template-columns:1fr;}}
.s-card{
  border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--border);
  transform-style:preserve-3d; cursor:zoom-in;
  transition:transform .45s var(--g-ease), box-shadow .45s;
}
.s-card img{width:100%; aspect-ratio:16/11; object-fit:cover;}
.s-card:nth-child(odd):hover{transform:rotateX(4deg) rotateY(-6deg) translateY(-8px);}
.s-card:nth-child(even):hover{transform:rotateX(4deg) rotateY(6deg) translateY(-8px);}
.s-card:hover{box-shadow:var(--shadow), var(--glow);}
.s-card::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform:translateX(-110%);
}
.s-card:hover::before{transition:transform .8s var(--g-ease); transform:translateX(110%);}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(4,8,16,.92);
  display:grid; place-items:center; padding:4vw;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{
  max-width:min(1100px,92vw); max-height:86vh; border-radius:16px;
  border:1px solid var(--border); box-shadow:0 40px 120px rgba(0,0,0,.7);
  transform:scale(.92); transition:transform .35s var(--g-ease);
}
.lightbox.open img{transform:scale(1);}
.lb-close{
  position:absolute; top:26px; right:30px; width:44px; height:44px; border-radius:50%;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  font-size:1.1rem; cursor:pointer; display:grid; place-items:center; transition:all .25s;
}
.lb-close:hover{border-color:var(--accent); color:var(--accent); transform:rotate(90deg);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .rv,.m-item{opacity:1; transform:none;}
  .g-hero h1 .word{opacity:1; transform:none;}
  .p-col{transform:none !important;}
}