/* =========================================================
   BONDHU LOUNGE — Roma · Tuscolana
   "Alpona & Ink" — warm, cinematic, hand-crafted.
   Palette from the brand key-art: kraft, oxblood, olive, teal.
   ========================================================= */

:root {
  /* ---- BRAND CORES (sampled exact from logo + card) ---- */
  --brand-orange:#DC5E1C; --brand-brown:#36211A; --brand-white:#FFFFFF;

  /* ---- ORANGE ramp ---- */
  --orange-700:#8B3D14; --orange-600:#B54E18; --orange-500:#DC5E1C;
  --orange-400:#E27840; --orange-300:#E79B6F; --orange-200:#EEBE9F; --orange-100:#F3DBC6;
  /* ---- BROWN ramp ---- */
  --brown-900:#271711; --brown-800:#36211A; --brown-700:#55423A; --brown-600:#74635A;
  --brown-500:#96887E; --brown-400:#B2A59A; --brown-300:#C9BEB2; --brown-200:#E0D6CA;
  --brown-100:#EDE5D8; --brown-50:#F4ECDF;
  /* ---- CREAMS ---- */
  --cream-50:#FBF6EF; --cream-100:#F7EFE2; --cream-200:#EBE3D6; --cream-300:#DED4C8;

  /* ---- LEGACY NAMES, reassigned on-brand (keeps diorama + sections working) ---- */
  --paper:#F7EFE2; --paper-2:#EBE3D6; --paper-3:#DED4C8;
  --night:#271711; --night-2:#36211A; --night-3:#55423A;
  --ink:#2A1A12; --ink-soft:#5C4636; --ink-dim:#74635A;
  --cream:#F3E6D2; --cream-soft:#D9C7AE; --cream-dim:#B2A59A;
  --alta:#DC5E1C; --alta-deep:#8B3D14; --indigo:#55423A; --indigo-lit:#74635A;
  --marigold:#E27840; --teal:#B54E18; --lotus:#E79B6F; --bottle:#74635A;
  --rule-ink:rgba(42,26,18,0.16); --rule-cream:rgba(243,230,210,0.14);

  /* ---- SEMANTIC ---- */
  --bg-page:#271711; --bg-page-light:#F7EFE2; --surface:#36211A; --surface-light:#FBF6EF;
  --surface-raised:#55423A; --surface-sunk:#EBE3D6;
  --text:#F3E6D2; --text-on-light:#2A1A12; --text-muted:#C9BEB2; --text-muted-light:#5C4636;
  --accent:#DC5E1C; --accent-strong:#B54E18; --accent-deep:#8B3D14; --accent-lit:#E27840;
  --on-orange:#FFFFFF; --on-orange-brown:#271711; --on-brown:#F3E6D2;
  --line:rgba(42,26,18,0.16); --line-dark:rgba(243,230,210,0.16);
  --focus:#E27840; --focus-ring:0 0 0 3px rgba(226,120,64,0.55);

  /* ---- DEPTH / CINEMATIC ---- */
  --elev-1:0 1px 2px rgba(26,15,10,0.28), 0 2px 6px rgba(26,15,10,0.20);
  --elev-2:0 6px 16px rgba(26,15,10,0.34), 0 2px 6px rgba(26,15,10,0.22);
  --elev-3:0 16px 40px rgba(20,11,7,0.42), 0 6px 14px rgba(20,11,7,0.28);
  --elev-4:0 32px 80px rgba(16,9,5,0.52), 0 10px 24px rgba(16,9,5,0.34);
  --glow-warm:0 0 28px rgba(226,120,64,0.45), 0 0 64px rgba(220,94,28,0.28);
  --glow-soft:0 0 18px rgba(231,155,111,0.40); --glow-color:rgba(226,120,64,0.55);
  --scrim:linear-gradient(180deg, rgba(20,13,7,0.42) 0%, transparent 30%, transparent 60%, rgba(16,9,5,0.78) 100%);
  --scrim-radial:radial-gradient(ellipse 60% 55% at 50% 44%, transparent 38%, rgba(20,13,7,0.55) 86%, rgba(16,9,5,0.92) 100%);
  --scrim-flat:rgba(20,13,7,0.55); --tint-glaze:rgba(220,94,28,0.10);

  /* ---- NON-COLOR (preserved) ---- */
  --display:"Fraunces",Georgia,serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --bangla:"Noto Serif Bengali",serif;
  --bangla-deco:"Galada","Noto Serif Bengali",cursive;
  --pad:clamp(20px,4.5vw,72px); --maxw:1320px;
  --ease:cubic-bezier(0.22,0.7,0.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:clip; }
body { font-family:var(--body); background:var(--night); color:var(--cream); line-height:1.6; font-size:17px; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--alta); color:var(--cream); }

.grain { position:fixed; inset:0; pointer-events:none; z-index:80; opacity:0.42; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* TYPE */
h1,h2,h3 { font-family:var(--display); font-weight:380; font-optical-sizing:auto; letter-spacing:-0.012em; line-height:0.98; }
em,.em { font-style:italic; }
.eyebrow { font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; display:inline-flex; align-items:center; gap:14px; }
.eyebrow .tick { width:30px; height:1px; background:currentColor; opacity:0.55; }
.bangla-deco { font-family:var(--bangla-deco); font-weight:400; }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:20px var(--pad); z-index:60; transition:background-color .4s var(--ease), padding .4s var(--ease); }
.nav.scrolled { background:rgba(27,19,11,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:13px var(--pad); }
.nav .brand { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-0.01em; color:var(--cream); text-shadow:0 2px 12px rgba(0,0,0,0.5); line-height:1; }
.nav .brand .brand-name { line-height:1; }
.nav .brand .bn { font-family:var(--bangla-deco); font-size:16px; color:var(--marigold); line-height:1; position:relative; top:1px; }
.nav .links { display:flex; align-items:center; gap:30px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream); }
.nav .links a { position:relative; padding:4px 0; opacity:0.82; transition:opacity .3s; text-shadow:0 1px 8px rgba(0,0,0,0.5); }
.nav .links a:hover { opacity:1; }
.nav .links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--marigold); transition:width .35s var(--ease); }
.nav .links a:hover::after { width:100%; }
.nav .nav-cta { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; border:1px solid rgba(244,232,205,0.5); border-radius:999px; padding:10px 20px; color:var(--cream); transition:background .3s,color .3s,border-color .3s; }
.nav .nav-cta:hover { background:var(--marigold); color:var(--night); border-color:var(--marigold); }
@media (max-width:860px){ .nav .links { display:none; } }

/* =========================================================
   HERO — cinematic, hand-crafted, alive
   ========================================================= */
.hero { position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--night); isolation:isolate; }
.hero-parallax { position:absolute; inset:0; z-index:0; will-change:transform; }
.hero-bg { position:absolute; inset:-6%; background-size:cover; background-position:center 42%; animation:kenburns 42s var(--ease) infinite alternate; will-change:transform; }

/* cinematic grade + soft depth-of-field vignette */
.hero-grade { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 52% at 50% 44%, transparent 38%, rgba(27,19,11,0.5) 84%, rgba(18,12,6,0.92) 100%),
    linear-gradient(180deg, rgba(27,19,11,0.5) 0%, transparent 22%, transparent 50%, rgba(18,12,6,0.9) 100%);
  box-shadow: inset 0 0 240px 70px rgba(18,12,6,0.7);
}
/* warm god-rays from above */
.godrays { position:absolute; left:0; right:0; top:-22%; height:95%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:0.5;
  background:conic-gradient(from 180deg at 50% -8%, transparent 0deg, rgba(224,163,47,0.16) 10deg, transparent 22deg, transparent 40deg, rgba(245,210,140,0.12) 52deg, transparent 64deg, transparent 296deg, rgba(224,163,47,0.14) 314deg, transparent 332deg);
  filter:blur(10px); transform-origin:50% 0; animation:rays 16s ease-in-out infinite alternate; }
/* soft golden bokeh */
.bokeh { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.boke { position:absolute; bottom:-12%; border-radius:50%; filter:blur(2px); will-change:transform;
  background:radial-gradient(circle, rgba(247,228,168,0.85), rgba(224,163,47,0.18) 58%, transparent 72%);
  animation:floatup var(--dur,24s) linear var(--delay,0s) infinite; }

/* floating umbrellas (with depth) + kite */
.atmo { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; will-change:transform; }
.umbrella { position:absolute; will-change:transform; transform-origin:50% 0; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  animation:umbrelladrift var(--dur,9s) var(--ease) var(--delay,0s) infinite alternate; }
.umbrella:nth-child(even) { filter:blur(1.4px) drop-shadow(0 8px 14px rgba(0,0,0,0.35)); opacity:0.82; }
.kite { position:absolute; will-change:transform; transform-origin:50% -140px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4)); animation:kitesway 6.5s var(--ease) infinite; }

/* delicate alpona corner flourishes */
.corner { position:absolute; width:clamp(64px,9vw,128px); height:auto; z-index:4; fill:none; stroke:var(--marigold); stroke-width:1.3; opacity:0.45; pointer-events:none; }
.corner path { vector-effect:non-scaling-stroke; }
.corner.tl { top:84px; left:24px; }
.corner.tr { top:84px; right:24px; transform:scaleX(-1); }
.corner.bl { bottom:24px; left:24px; transform:scaleY(-1); }
.corner.br { bottom:24px; right:24px; transform:scale(-1,-1); }

/* content lockup */
.hero-content { position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; text-align:center; gap:16px; padding:0 var(--pad); }
.hero-logo { width:clamp(74px,9vw,108px); height:auto; border-radius:50%; margin-bottom:10px; filter:drop-shadow(0 8px 26px rgba(0,0,0,0.6)); }
.hero-kicker { font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:0.36em; text-transform:uppercase; color:var(--marigold); text-shadow:0 2px 14px rgba(0,0,0,0.65); }
.wordmark { color:var(--cream); line-height:0.82; text-shadow:0 8px 40px rgba(0,0,0,0.6); }
.wordmark .bn { display:block; font-family:var(--bangla-deco); color:var(--marigold); font-size:clamp(26px,3.4vw,52px); margin-bottom:0.12em; line-height:1; text-shadow:0 2px 18px rgba(0,0,0,0.55); }
.wordmark .bondhu { display:block; font-family:var(--display); font-weight:740; font-size:clamp(58px,12.5vw,196px); letter-spacing:-0.02em; }
.wordmark .lounge { display:block; font-family:var(--body); font-weight:700; font-size:clamp(15px,2.3vw,30px); letter-spacing:0.52em; text-transform:uppercase; color:var(--cream-soft); margin-top:0.55em; padding-left:0.52em; }
.hero-rule { display:inline-flex; align-items:center; gap:14px; margin-top:6px; }
.hero-rule span { width:clamp(40px,8vw,120px); height:1px; }
.hero-rule span:first-child { background:linear-gradient(90deg,transparent,var(--marigold)); }
.hero-rule span:last-child { background:linear-gradient(90deg,var(--marigold),transparent); }
.hero-rule i { width:7px; height:7px; transform:rotate(45deg); background:var(--marigold); box-shadow:0 0 10px rgba(224,163,47,0.6); }
.hero-sub { font-family:var(--display); font-style:italic; font-size:clamp(18px,2.4vw,28px); color:var(--cream-soft); text-shadow:0 2px 16px rgba(0,0,0,0.6); }
.hero-cta { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:14px; }

.scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6; font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:0.34em; text-transform:uppercase; color:var(--cream-soft); display:flex; flex-direction:column; align-items:center; gap:10px; text-shadow:0 2px 10px rgba(0,0,0,0.6); }
.scroll-cue .line { width:1px; height:46px; background:linear-gradient(var(--marigold),transparent); transform-origin:top; animation:cue 2.4s var(--ease) infinite; }

@keyframes kenburns { from { transform:scale(1.04) translate(0,0); } to { transform:scale(1.16) translate(-1.5%,-2.5%); } }
@keyframes rays { from { opacity:0.35; transform:translateX(-2%); } to { opacity:0.62; transform:translateX(2%); } }
@keyframes floatup { 0% { transform:translateY(0) translateX(0) scale(0.85); opacity:0; } 12% { opacity:1; } 85% { opacity:0.7; } 100% { transform:translateY(-112svh) translateX(var(--dx,30px)) scale(1.25); opacity:0; } }
@keyframes umbrelladrift { from { transform:translateY(-8px) rotate(var(--rot,-4deg)); } to { transform:translateY(12px) rotate(calc(var(--rot,-4deg)*-1)); } }
@keyframes kitesway { 0%,100% { transform:translate(0,0) rotate(-7deg); } 50% { transform:translate(12px,-10px) rotate(9deg); } }
@keyframes cue { 0%,100% { transform:scaleY(0.3); opacity:0.4; } 50% { transform:scaleY(1); opacity:1; } }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:12px; font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; padding:16px 28px; border-radius:999px; background:var(--alta); color:var(--cream); border:1px solid var(--alta); cursor:pointer; position:relative; overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s,background .3s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(178,58,41,0.4); background:var(--alta-deep); }
.btn .arr { width:15px; height:15px; }
.btn.ghost { background:rgba(244,232,205,0.07); color:var(--cream); border-color:rgba(244,232,205,0.5); }
.btn.ghost:hover { background:rgba(244,232,205,0.15); box-shadow:none; }

/* ALPONA DIVIDER */
.alpona { display:block; width:100%; padding:clamp(26px,5vh,56px) 0; }
.alpona svg { width:min(760px,82vw); height:auto; margin:0 auto; overflow:visible; }
.alpona .stroke { fill:none; stroke:var(--alta); stroke-width:1.6; stroke-linecap:round; opacity:0.9; }
.alpona.on-night .stroke { stroke:var(--marigold); }
/* mobile: alpona draws faster + thinner on small screens — thicken + add glow so the
   scroll-draw is clearly visible while it's in the viewport */
@media (max-width:720px){
  .alpona svg { width:min(620px,90vw); }
  .alpona .stroke { stroke-width:2.6; filter:drop-shadow(0 0 3px rgba(220,94,28,0.45)); }
}

/* SECTIONS */
section.section { position:relative; padding:clamp(90px,14vh,180px) var(--pad); }
.section-inner { max-width:var(--maxw); margin:0 auto; position:relative; }
.paper { background:var(--paper); color:var(--ink); background-image:radial-gradient(ellipse 60% 50% at 12% 0%, rgba(224,163,47,0.12), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(178,58,41,0.08), transparent 60%); }
.paper .eyebrow, .paper .em { color:var(--alta-deep); }
.night { background:var(--night); color:var(--cream); }
.night .eyebrow, .night .em { color:var(--marigold); }

/* INTRO */
.intro-inner { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,110px); align-items:end; }
.intro .big-bn { font-family:var(--bangla-deco); font-size:clamp(120px,22vw,300px); line-height:0.7; color:var(--alta-deep); }
.intro .big-bn .gloss { display:block; font-family:var(--display); font-style:italic; font-size:0.13em; color:var(--ink-soft); margin-top:0.2em; }
.intro-lead { font-family:var(--display); font-weight:360; font-size:clamp(26px,3.3vw,46px); line-height:1.22; text-wrap:pretty; }
.intro-meta { margin-top:34px; display:flex; flex-wrap:wrap; gap:16px; font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); }
.intro-meta .sep { width:22px; height:1px; background:var(--rule-ink); align-self:center; }
@media (max-width:820px){ .intro-inner { grid-template-columns:1fr; align-items:start; gap:24px; } }
.line-wrap { display:block; overflow:hidden; }

/* SCENE */
.scene { position:relative; height:92svh; min-height:560px; overflow:hidden; background:var(--night); }
.scene-media { position:absolute; inset:-8%; background-size:cover; background-position:center; will-change:transform; }
.scene-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(27,19,11,0.55) 0%, transparent 30%, transparent 55%, rgba(18,12,6,0.86) 100%); }
.scene-cap { position:absolute; left:var(--pad); bottom:clamp(40px,8vh,90px); z-index:3; max-width:620px; }
.scene-cap .eyebrow { color:var(--marigold); margin-bottom:18px; }
.scene-cap h2 { font-size:clamp(34px,6vw,78px); color:var(--cream); text-shadow:0 4px 28px rgba(0,0,0,0.6); }
.scene-cap p { margin-top:18px; color:var(--cream-soft); font-size:clamp(16px,1.7vw,20px); max-width:48ch; text-shadow:0 2px 14px rgba(0,0,0,0.6); }
.scene-cap .bn { font-family:var(--bangla-deco); color:var(--marigold); }

/* FOOTER */
.foot { background:var(--night); color:var(--cream-soft); border-top:1px solid var(--rule-cream); padding:64px var(--pad); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.foot .mark { font-family:var(--display); font-size:30px; color:var(--cream); font-weight:600; }
.foot .mark .bn { font-family:var(--bangla-deco); font-size:0.7em; color:var(--marigold); }
.foot .copy { font-size:13px; color:var(--cream-dim); }
.foot .credit { display:inline-flex; flex-direction:column; align-items:center; gap:9px; margin-top:10px; font-family:var(--body); font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--cream-dim); transition:opacity .3s; }
.foot .credit:hover { opacity:0.82; }
.foot .credit b { color:var(--marigold); font-weight:700; }
.foot .credit-label { opacity:0.7; }
.foot .credit-logo { width:132px; height:auto; opacity:0.92; }

/* RESPONSIVE */
@media (max-width:720px){ :root { --pad:22px; } body { font-size:16px; } section.section { padding:clamp(64px,10vh,120px) var(--pad); } .scene { height:80svh; } .wordmark .lounge { letter-spacing:0.4em; } .corner { display:none; } }

/* =========================================================
   TOUCH TARGETS — ensure tappable links ≥44px on touch devices
   (Apple/Google min). Inline text-links in contact/footer/menu
   are visually unchanged on desktop; this only pads on coarse pointers.
   ========================================================= */
@media (pointer:coarse){
  /* contact rows: address / phone / email / Instagram */
  .vv a { display:inline-flex; align-items:center; min-height:44px; }
  /* footer: address + phone lines, social row, credit */
  .foot .copy a, .foot-social a, .foot .credit { display:inline-flex; align-items:center; min-height:44px; }
  .foot-social { gap:14px; }
  /* menù section: WhatsApp / chiama inline links */
  .menu-alt a { display:inline-flex; align-items:center; min-height:44px; }
  /* mobile drawer contact links */
  .drawer-foot a { display:inline-flex; align-items:center; min-height:44px; }
  /* nav brand (logo + wordmark) — comfortable tap back-to-top */
  .nav .brand { min-height:44px; }
}

/* =========================================================
   DIORAMA HERO — living animated Banglatown scene
   ========================================================= */
.hero-scene { position:relative; height:100svh; min-height:600px; overflow:hidden; background:#5A2E1B; isolation:isolate; }
.dscene { position:absolute; inset:0; z-index:1; will-change:transform; }
.dlayer { position:absolute; inset:-5%; will-change:transform; }
.dlayer svg { width:100%; height:100%; display:block; }

.scene-veil { position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 42%, rgba(20,13,7,0.5), transparent 70%),
    linear-gradient(180deg, rgba(20,13,7,0.42) 0%, transparent 28%, transparent 66%, rgba(20,13,7,0.7) 100%); }

.hero-scene .hero-content { z-index:7; }
.hero-scene .scroll-cue { z-index:8; }

/* fireflies */
.fireflies { position:absolute; inset:0; z-index:5; pointer-events:none; }
.fly { position:absolute; border-radius:50%; background:radial-gradient(circle, #fff3b0, rgba(224,163,47,0.2) 60%, transparent 72%); box-shadow:0 0 8px #ffe9ad; opacity:0.7; will-change:transform,opacity; animation:fly var(--dur,6s) ease-in-out var(--delay,0s) infinite; }

/* scene motion */
.sun { animation:sunpulse 8s ease-in-out infinite; }
.cloud { animation:cloud var(--cd,80s) linear infinite; }
.bird { animation:bird 28s linear infinite; }
.boat { animation:driftboat 42s linear infinite; }
.roll { animation:roll 22s linear infinite; }
.kiteg { transform-box:view-box; animation:kitesway2 6s ease-in-out infinite; }
.umb { transform-box:view-box; animation:umbsway var(--ud,5s) ease-in-out infinite alternate; }
.smoke { transform-box:view-box; animation:smoke 7s ease-out infinite; }
.neon { animation:flicker 5s steps(1,end) infinite; }

@keyframes sunpulse { 0%,100% { opacity:0.9; } 50% { opacity:1; } }
@keyframes cloud { from { transform:translateX(-180px); } to { transform:translateX(1780px); } }
@keyframes bird { from { transform:translate(1700px,0); } to { transform:translate(-240px,-70px); } }
@keyframes driftboat { from { transform:translateX(360px); } to { transform:translateX(-1500px); } }
@keyframes roll { from { transform:translateX(-260px); } to { transform:translateX(1880px); } }
@keyframes kitesway2 { 0%,100% { transform:translate(0,0) rotate(-6deg); } 50% { transform:translate(14px,-12px) rotate(8deg); } }
@keyframes umbsway { from { transform:rotate(-7deg); } to { transform:rotate(7deg); } }
@keyframes smoke { 0% { opacity:0; transform:translateY(0) scale(0.6); } 25% { opacity:0.5; } 100% { opacity:0; transform:translateY(-130px) scale(1.5); } }
@keyframes flicker { 0%,17%,21%,100% { opacity:1; } 19%,40%,43% { opacity:0.55; } }
@keyframes fly { 0%,100% { transform:translateY(0) scale(0.8); opacity:0.2; } 50% { transform:translateY(-18px) scale(1.2); opacity:0.9; } }

/* atmospheric warm haze for depth */
.scene-haze { position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:soft-light; opacity:0.6;
  background:
    radial-gradient(ellipse 55% 45% at 64% 30%, rgba(255,214,150,0.7), transparent 62%),
    linear-gradient(180deg, rgba(255,225,170,0.25) 0%, transparent 38%, transparent 70%, rgba(40,26,14,0.4) 100%); }
/* festive string lights */
.twinkle { filter:drop-shadow(0 0 5px rgba(255,220,150,0.9)); animation:twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
/* river sun reflection */
.shimmer { transform-box:view-box; transform-origin:1140px 512px; animation:shimmer 5s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity:0.16; transform:scaleX(0.9); } 50% { opacity:0.42; transform:scaleX(1.06); } }

/* =========================================================
   KRAFT HERO — editorial · real cut-out rickshaw
   ========================================================= */
.hero-kraft { position:relative; height:100svh; min-height:620px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 80% 70% at 28% 24%, #ecdfbd 0%, transparent 62%),
    radial-gradient(ellipse 70% 70% at 92% 98%, #ccb486 0%, transparent 64%),
    linear-gradient(158deg, #e9d9b3 0%, #ddc99c 56%, #cfb988 100%); }
.hk-glow { position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(ellipse 44% 46% at 66% 40%, rgba(224,163,47,0.42), transparent 70%); animation:glow 7s var(--ease) infinite; }
@keyframes glow { 0%,100% { opacity:0.55; } 50% { opacity:0.95; } }

.atmo-k { position:absolute; inset:0; z-index:2; pointer-events:none; will-change:transform; }
.umb-f { position:absolute; transform-origin:50% 0; will-change:transform; animation:umbrelladrift var(--dur,9s) var(--ease) var(--delay,0s) infinite alternate; filter:drop-shadow(0 8px 14px rgba(60,40,20,0.26)); }
.umb-f:nth-child(even) { opacity:0.85; filter:blur(0.7px) drop-shadow(0 6px 10px rgba(60,40,20,0.2)); }
.kite-f { position:absolute; transform-origin:50% -140px; will-change:transform; animation:kitesway 6.5s var(--ease) infinite; filter:drop-shadow(0 6px 12px rgba(60,40,20,0.3)); }

.hk-rickshaw-wrap { position:absolute; right:clamp(-60px,2vw,90px); bottom:0; z-index:3; height:100%; display:flex; align-items:flex-end; will-change:transform; pointer-events:none; }
.hk-rickshaw { height:min(122%,1480px); width:auto; filter:drop-shadow(0 26px 38px rgba(50,34,16,0.42)); animation:floaty 7s var(--ease) infinite;
  -webkit-mask-image:linear-gradient(to top, #000 78%, transparent 96%); mask-image:linear-gradient(to top, #000 78%, transparent 96%); }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }

.kraft-content { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; gap:14px; padding-left:clamp(24px,7vw,124px); padding-right:46%; }
.hero-kraft .hero-kicker { color:var(--alta); text-shadow:none; }
.hero-kraft .wordmark { color:var(--ink); text-shadow:none; line-height:0.82; }
.hero-kraft .wordmark .bn { color:var(--alta); text-shadow:none; }
.hero-kraft .wordmark .bondhu { color:var(--alta-deep); }
.hero-kraft .wordmark .lounge { color:var(--ink-soft); }
.hero-kraft .hero-rule i { background:var(--alta); box-shadow:none; }
.hero-kraft .hero-rule span:first-child { background:linear-gradient(90deg,transparent,var(--alta)); }
.hero-kraft .hero-rule span:last-child { background:linear-gradient(90deg,var(--alta),transparent); }
.hero-kraft .hero-sub { color:var(--ink-soft); text-shadow:none; }
.hero-kraft .boke { background:radial-gradient(circle, rgba(255,242,200,0.6), rgba(224,163,47,0.16) 55%, transparent 72%); mix-blend-mode:screen; opacity:0.4; }
.scroll-cue.dark { color:var(--ink-soft); text-shadow:none; }
.scroll-cue.dark .line { background:linear-gradient(var(--alta),transparent); }

/* nav over kraft */
.nav.onkraft .brand, .nav.onkraft .links a { color:var(--ink); text-shadow:none; }
.nav.onkraft .brand .bn { color:var(--alta); }
.nav.onkraft .nav-cta { border-color:rgba(44,32,19,0.4); color:var(--ink); }
.nav.onkraft .nav-cta:hover { background:var(--alta); color:#fff; border-color:var(--alta); }
.nav.onkraft.scrolled { background:rgba(231,215,178,0.82); }
.nav.onkraft .links a::after { background:var(--alta); }

@media (max-width:900px) {
  .kraft-content { padding:18vh 24px 0; align-items:center; text-align:center; justify-content:flex-start; }
  .hk-rickshaw-wrap { right:auto; left:50%; transform:translateX(50%); opacity:0.55; }
  .hk-rickshaw { height:min(62%,760px); }
  .corner { display:none; }
}

/* =========================================================
   NAV — logo, scrollspy, mobile drawer
   ========================================================= */
.nav .brand { gap:12px; }
.brand-logo { width:40px; height:40px; border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,0.4); flex:none; transition:transform .4s var(--ease); }
.nav .brand:hover .brand-logo { transform:rotate(-8deg) scale(1.06); }
.nav .links a.on { opacity:1; color:var(--marigold); }
.nav .links a.on::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-ig { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--cream); border:1px solid rgba(243,230,210,0.32); transition:color .3s, border-color .3s, background .3s, transform .3s; }
.nav-ig:hover { color:var(--night); background:var(--marigold); border-color:var(--marigold); transform:translateY(-1px); }
/* keep the Instagram icon visible beside the burger on mobile */
@media (max-width:860px){ .nav-ig { display:inline-flex; width:42px; height:42px; } }
.burger { display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; z-index:62; }
.burger span { width:24px; height:2px; background:var(--cream); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.nav.open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; }
.nav.open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.drawer { position:fixed; inset:0; z-index:61; background:linear-gradient(160deg, var(--brown-900), var(--brown-800)); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px; opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.nav.open .drawer { opacity:1; pointer-events:auto; transform:none; }
.drawer nav { display:flex; flex-direction:column; align-items:center; gap:22px; }
.drawer nav a { font-family:var(--display); font-size:34px; color:var(--cream); font-weight:420; }
.drawer nav a.drawer-cta { margin-top:14px; font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; background:var(--accent-strong); color:#fff; padding:14px 28px; border-radius:999px; }
.drawer-foot { display:flex; gap:24px; font-size:13px; color:var(--cream-dim); letter-spacing:0.04em; }
.drawer-foot a { color:var(--marigold); }
@media (max-width:860px){ .nav .nav-cta { display:none; } .burger { display:flex; } }

/* =========================================================
   CURSOR GLOW + MAGNETIC
   ========================================================= */
.cursor-glow { position:fixed; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; z-index:90; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(226,120,64,0.55), rgba(220,94,28,0.18) 55%, transparent 72%);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); }
.cursor-glow.hot { width:64px; height:64px; margin:-32px 0 0 -32px; }
@media (pointer:coarse){ .cursor-glow { display:none; } }
.mag { display:inline-flex; will-change:transform; }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.sec-head { max-width:880px; margin-bottom:clamp(40px,7vh,90px); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow { justify-content:center; }
.sec-title { font-family:var(--display); font-weight:380; font-size:clamp(32px,5.2vw,74px); line-height:1.02; margin-top:22px; text-wrap:balance; }
.sec-lead { margin-top:24px; font-size:clamp(16px,1.7vw,20px); line-height:1.6; max-width:62ch; color:var(--text-muted); }
.paper .sec-lead { color:var(--text-muted-light); }
.night .sec-title { color:var(--cream); } .night .eyebrow { color:var(--marigold); }
.night .sec-title em { color:var(--marigold); }
.paper .sec-title { color:var(--ink); } .paper .sec-title em { color:var(--alta-deep); }

/* =========================================================
   LO SPAZIO — immersive parallax panels
   ========================================================= */
.spazio { padding-bottom:clamp(60px,9vh,120px); }
.spz-panel { position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; align-items:stretch; gap:0; margin:clamp(40px,7vh,96px) 0; min-height:clamp(420px,72vh,720px); }
.spz-panel.flip { grid-template-columns:0.85fr 1.15fr; }
.spz-panel.flip .spz-media { order:2; } .spz-panel.flip .spz-cap { order:1; }
.spz-media { position:relative; overflow:hidden; border-radius:6px; box-shadow:var(--elev-3); }
.spz-img { position:absolute; inset:-10% 0; background-size:cover; will-change:transform; }
.spz-glaze { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(20,13,7,0.5)), var(--tint-glaze); mix-blend-mode:multiply; opacity:0.5; }
.spz-cap { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(28px,4vw,70px); background:var(--surface); }
.spz-panel.flip .spz-cap { background:var(--surface-raised); }
.spz-title { font-family:var(--display); font-weight:400; font-size:clamp(26px,3.4vw,48px); line-height:1.05; color:var(--cream); }
.spz-title .bn { font-family:var(--bangla-deco); font-size:0.6em; color:var(--marigold); margin-left:8px; }
.spz-cap p { color:var(--text-muted); font-size:clamp(15px,1.5vw,18px); max-width:46ch; }
@media (max-width:820px){ .spz-panel, .spz-panel.flip { grid-template-columns:1fr; min-height:0; }
  .spz-media { height:62vh; min-height:340px; } .spz-panel.flip .spz-media { order:1; } .spz-panel.flip .spz-cap { order:2; } }

.spz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); margin-top:clamp(30px,5vh,64px); }
.spz-cell { position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; box-shadow:var(--elev-2); }
.spz-cell-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s var(--ease); }
.spz-cell:hover .spz-cell-img { transform:scale(1.08); }
.spz-cell-cap { position:absolute; left:16px; bottom:14px; right:16px; z-index:2; font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--cream); text-shadow:0 2px 12px rgba(0,0,0,0.7); }
.spz-cell::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(16,9,5,0.78)); }
@media (max-width:680px){ .spz-grid { grid-template-columns:1fr 1fr; } }

/* 3D tilt hover (cards + media) */
.tilt { transition:transform .5s var(--ease), box-shadow .5s var(--ease); transform-style:preserve-3d; }
.tilt:hover { transform:perspective(900px) translateY(-6px) rotateX(2deg); box-shadow:var(--elev-4); }

/* =========================================================
   IL MENÙ
   ========================================================= */
.menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); margin-top:clamp(20px,3vh,40px); }
.menu-card { background:var(--surface-light); border:1px solid var(--brown-200); border-radius:8px; padding:26px 24px; box-shadow:var(--elev-1); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.menu-card:hover { transform:translateY(-6px); box-shadow:var(--elev-3); border-color:var(--accent); }
.menu-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--brown-200); }
.menu-card-head span:first-child { font-family:var(--display); font-size:21px; color:var(--ink); font-weight:480; }
.menu-card-head .bn { font-family:var(--bangla-deco); font-size:16px; color:var(--accent-deep); }
.menu-card ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.menu-card li { font-size:15px; color:var(--text-muted-light); position:relative; padding-left:16px; }
.menu-card li::before { content:"·"; position:absolute; left:2px; color:var(--accent); font-weight:700; }
.menu-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:clamp(34px,5vh,56px); }
@media (max-width:880px){ .menu-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .menu-grid { grid-template-columns:1fr; } }

/* =========================================================
   MIXOLOGY
   ========================================================= */
.mixo-inner { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(40px,6vw,90px); align-items:center; }
.mixo-tags { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.mixo-tags span { font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); border:1px solid var(--line-dark); border-radius:999px; padding:9px 18px; }
.mixo-art { display:grid; place-items:center; min-height:clamp(280px,40vh,420px); }
.mixo-orb { width:clamp(220px,30vw,330px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--orange-400), var(--orange-700) 62%, var(--brown-900));
  box-shadow:var(--glow-warm), var(--elev-4); animation:orbfloat 7s var(--ease) infinite; }
.mixo-orb .bn { font-family:var(--bangla-deco); font-size:clamp(40px,6vw,72px); color:#fff; text-shadow:0 4px 20px rgba(0,0,0,0.4); }
.mixo-orb-photo { background-size:cover; background-position:center 38%; position:relative; overflow:hidden; border:3px solid rgba(226,120,64,0.42); }
.mixo-orb-photo::after { content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(180deg, rgba(20,11,7,0.5) 0%, rgba(20,11,7,0.04) 34%, rgba(20,11,7,0.12) 60%, rgba(20,11,7,0.62) 100%); }
.mixo-orb-photo .bn { position:absolute; top:9%; left:0; right:0; z-index:2; font-size:clamp(28px,4.2vw,50px); text-shadow:0 3px 14px rgba(0,0,0,0.75); }
.mixo-orb-name { position:absolute; bottom:12%; left:8%; right:8%; z-index:2; text-align:center; font-family:var(--body); font-size:clamp(11px,1.3vw,14px); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); text-shadow:0 2px 10px rgba(0,0,0,0.9); }
@keyframes orbfloat { 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-16px) scale(1.02); } }
.mixo-stage { position:relative; display:grid; place-items:center; min-height:clamp(300px,42vh,440px); }
.mixo-stage .mixo-orb { position:relative; z-index:2; }
.mixo-bubbles { position:absolute; inset:0; pointer-events:none; z-index:3; }
@media (max-width:600px){ .mixo-bubbles { transform:scale(0.74); } }
.bubble { position:absolute; border-radius:50%; background-size:cover; background-position:center; will-change:transform; animation:bubfloat var(--d,7s) var(--ease) var(--delay,0s) infinite alternate; }
.bubble.has-img { box-shadow:var(--elev-3), 0 0 22px rgba(226,120,64,0.42); border:2px solid rgba(247,239,226,0.55); }
.bubble.amb { background:radial-gradient(circle at 36% 30%, rgba(247,239,226,0.55), rgba(226,120,64,0.30) 52%, rgba(139,61,20,0.14) 74%, transparent 80%); box-shadow:0 0 22px rgba(226,120,64,0.30); }
@keyframes bubfloat { 0%{ transform:translateY(0) translateX(0) scale(1); } 100%{ transform:translateY(-18px) translateX(7px) scale(1.05); } }
@media (max-width:820px){ .mixo-inner { grid-template-columns:1fr; } .mixo-art { order:-1; } }

/* =========================================================
   VIENI A TROVARCI
   ========================================================= */
.visita-inner { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(36px,5vw,80px); align-items:center; }
.visita-rows { margin-top:36px; display:flex; flex-direction:column; }
.visita-row { display:grid; grid-template-columns:130px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line-dark); align-items:start; }
.visita-row:last-child { border-bottom:1px solid var(--line-dark); }
.vk { font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--marigold); padding-top:3px; }
.vv, .vv a { font-size:clamp(16px,1.7vw,19px); color:var(--cream); line-height:1.4; }
.vv a { transition:color .3s; } .vv a:hover { color:var(--marigold); }
.visita-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.visita-map { position:relative; border-radius:8px; overflow:hidden; box-shadow:var(--elev-3); border:1px solid var(--line-dark); aspect-ratio:4/3.4; min-height:340px; }
.visita-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(0.9) contrast(1.02); }
@media (max-width:820px){ .visita-inner { grid-template-columns:1fr; } .visita-map { aspect-ratio:4/3; min-height:0; width:100%; max-width:100%; } }

/* =========================================================
   FOOTER additions
   ========================================================= */
.foot-logo { width:78px; height:78px; border-radius:50%; box-shadow:var(--elev-2); margin-bottom:6px; }
.foot-tag { font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--marigold); }
.foot .copy a { transition:color .3s; } .foot .copy a:hover { color:var(--marigold); }
.foot-social { display:flex; gap:22px; margin-top:6px; }
.foot-social a { font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); position:relative; }
.foot-social a::after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--marigold); transition:width .3s var(--ease); }
.foot-social a:hover::after { width:100%; }

/* =========================================================
   HERO DUSK VEIL (day -> dusk on scroll)
   ========================================================= */
.dusk { position:absolute; inset:0; z-index:4; pointer-events:none; will-change:opacity;
  background:linear-gradient(180deg, rgba(28,12,6,0.66) 0%, rgba(40,18,8,0.28) 40%, rgba(20,11,7,0.5) 100%); }

/* =========================================================
   ENTRA — scroll-scrub walkthrough
   ========================================================= */
.walk { position:relative; height:300vh; background:var(--brown-900); }
.walk-stage { position:sticky; top:0; height:100vh; overflow:hidden; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(20px,4vw,70px); padding:0 var(--pad);
  background:
    radial-gradient(ellipse 50% 60% at 72% 50%, rgba(220,94,28,0.18), transparent 60%),
    radial-gradient(circle at 18% 22%, rgba(226,120,64,0.10), transparent 52%),
    var(--brown-900); }
.walk-aside { grid-column:1; justify-self:end; max-width:380px; text-align:right; }
.walk-aside .eyebrow { color:var(--marigold); justify-content:flex-end; }
.walk-title { font-family:var(--display); font-weight:380; font-size:clamp(30px,3.6vw,58px); line-height:1.02; color:var(--cream); margin:18px 0; }
.walk-title em { color:var(--marigold); font-style:italic; }
.walk-aside p { color:var(--text-muted); max-width:34ch; margin-left:auto; }
.walk-prog { margin:28px 0 0 auto; width:130px; height:2px; background:var(--line-dark); border-radius:2px; overflow:hidden; }
.walk-prog span { display:block; height:100%; background:var(--accent); transition:width .5s var(--ease); }
.walk-frame { grid-column:2; position:relative; width:auto; height:min(84vh,800px); aspect-ratio:9/16; border-radius:18px; overflow:hidden; box-shadow:var(--elev-4), var(--glow-warm); background:#0c0704; }
.walk-media { width:100%; height:100%; object-fit:cover; display:block; }
.walk-vig { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px 20px rgba(16,9,5,0.6);
  background:linear-gradient(180deg, rgba(16,9,5,0.36), transparent 20%, transparent 60%, rgba(16,9,5,0.84)); }
.walk-cap { position:absolute; left:22px; right:22px; bottom:24px; z-index:2; display:flex; flex-direction:column; gap:3px; }
.walk-cap .wk { font-family:var(--display); font-size:clamp(22px,2.4vw,34px); color:var(--cream); text-shadow:0 2px 16px rgba(0,0,0,0.75); }
.walk-cap .wt { font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--marigold); text-shadow:0 2px 10px rgba(0,0,0,0.85); }
.walk-credit { position:absolute; top:14px; right:14px; z-index:2; font-size:10px; letter-spacing:0.08em; color:rgba(255,255,255,0.62); background:rgba(16,9,5,0.42); padding:4px 10px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
@media (max-width:860px){
  .walk { height:240vh; }
  .walk-stage { grid-template-columns:1fr; justify-items:center; padding-left:0; padding-right:0; }
  .walk-aside { display:none; }
  .walk-frame { grid-column:1; justify-self:center; margin-inline:auto; height:auto; width:min(92vw,440px); max-height:88vh; }
}

/* =========================================================
   LO SPAZIO — hoverable gallery
   ========================================================= */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,21vh,210px); grid-auto-flow:dense; gap:clamp(10px,1.4vw,18px); margin-top:clamp(30px,5vh,60px); }
.gcell { grid-row:span 1; }
.gcell.g-tall { grid-row:span 2; }
.gcell.g-wide { grid-column:span 2; }
.gcell-inner { position:relative; width:100%; height:100%; border-radius:9px; overflow:hidden; box-shadow:var(--elev-2); cursor:pointer; }
.gcell-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s var(--ease), filter .6s; filter:saturate(0.96) brightness(0.9); }
.gcell-inner:hover .gcell-img { transform:scale(1.09); filter:saturate(1.1) brightness(1.03); }
.gcell-inner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(16,9,5,0.86)); opacity:0.82; transition:opacity .5s; }
.gcell-inner:hover::after { opacity:1; }
.gcell-cap { position:absolute; left:16px; right:14px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:2px; transform:translateY(10px); opacity:0; transition:transform .5s var(--ease), opacity .5s; }
.gcell-inner:hover .gcell-cap { transform:none; opacity:1; }
.gcell-cap .gt { font-family:var(--display); font-size:clamp(17px,1.5vw,21px); color:var(--cream); }
.gcell-cap .gbn { font-family:var(--bangla-deco); font-size:14px; color:var(--marigold); }
@media (max-width:820px){ .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .gcell.g-wide { grid-column:span 2; } .gcell.g-tall { grid-row:span 2; } .gcell-cap { opacity:1; transform:none; } }

/* =========================================================
   IL MENÙ — click-to-open PDF cover
   ========================================================= */
.menu-open { display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:clamp(26px,4vh,52px); }
.menu-cover { display:flex; flex-direction:column; align-items:center; gap:7px; width:min(340px,86vw); padding:44px 30px 34px; border-radius:16px; text-align:center;
  background:linear-gradient(165deg, var(--brown-800), var(--brown-900)); color:var(--cream); border:1px solid rgba(226,120,64,0.28); box-shadow:var(--elev-3); cursor:pointer; }
.menu-cover-bn { font-family:var(--bangla-deco); font-size:30px; color:var(--marigold); }
.menu-cover-logo { width:96px; height:96px; border-radius:50%; box-shadow:0 6px 22px rgba(0,0,0,0.45); margin:4px 0 6px; }
.menu-cover-name { font-family:var(--display); font-size:27px; color:var(--cream); font-weight:560; }
.menu-cover-sub { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cream-dim); }
.menu-cover-open { margin-top:18px; display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--night); background:var(--accent); padding:13px 24px; border-radius:999px; transition:background .3s, transform .3s; }
.menu-cover:hover .menu-cover-open { background:var(--accent-lit); }
.menu-cover .arr { width:15px; height:15px; }
.menu-alt { font-size:14px; color:var(--text-muted-light); }
.menu-alt a { color:var(--accent-deep); border-bottom:1px solid currentColor; transition:color .3s; }
.menu-alt a:hover { color:var(--accent); }
.vv-sub { display:block; font-size:12px; color:var(--text-muted); letter-spacing:0.03em; margin-top:2px; }

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } .hero-bg { animation:none; transform:scale(1.04); } .cursor-glow { display:none; } }