/* ============================================================
   RANA'S — REJUVENATION LAYER
   "Royal Punjab · Editorial Heritage"
   Tactile grain · espresso depth · editorial type ·
   orchestrated page-load · refined micro-interactions.
   Loaded AFTER styles.css so it elevates every page.
   ============================================================ */

:root {
  --espresso: #1B0E08;
  --ink-deep: #1E140C;
  --gold-grad: linear-gradient(177deg, #fff3cf 0%, #f2da8c 24%, #e8c14a 44%, #c0991f 60%, #9c7615 74%, #e8c14a 100%);
}

/* warmer, deeper page atmosphere */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(196,87,28,.06), transparent 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(94,20,24,.05), transparent 55%),
    var(--cream);
  background-attachment: fixed;
}

/* tactile grain overlay (sits over content, under nav/overlays) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grainShift 7s steps(6) infinite; }
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)} 40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)}
}

/* ---------- Editorial typography ---------- */
.display, .page-head__title { letter-spacing: -.025em; }
.h-section { letter-spacing: -.02em; line-height: 1.04; }
.eyebrow { font-size: .72rem; letter-spacing: .36em; }
.lead { font-weight: 300; }

/* gold serif index numerals + vertical kickers (decorative) */
.ed-index {
  font-family: var(--serif); font-weight: 800; font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; opacity: .9;
}
.ed-rule { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); border: 0; flex: 1; }

/* ---------- Orchestrated hero page-load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cover-hero__brand > * { animation: heroIn .85s cubic-bezier(.2,.75,.2,1) both; }
  .cover-hero__brand > *:nth-child(1) { animation-delay: .05s; }
  .cover-hero__brand > *:nth-child(2) { animation-delay: .16s; }
  .cover-hero__brand > *:nth-child(3) { animation-delay: .27s; }
  .cover-hero__brand > *:nth-child(4) { animation-delay: .36s; }
  .cover-hero__brand > *:nth-child(5) { animation-delay: .44s; }
  .cover-hero__brand > *:nth-child(6) { animation-delay: .52s; }
  .cover-hero__brand > *:nth-child(7) { animation-delay: .60s; }
  .cover-hero__brand > *:nth-child(8) { animation-delay: .68s; }
  .cover-hero__media { animation: heroMediaIn 1.1s cubic-bezier(.2,.75,.2,1) .5s both; }
  .cover-hero__media .arch .ph__img { animation: kenburns 18s ease-in-out infinite alternate; }
  /* one-time light sweep across the brand lockup */
  .cover-hero__brand { position: relative; }
  .cover-hero__brand::after {
    content: ""; position: absolute; inset: -10% -20%; pointer-events: none; z-index: 3;
    background: linear-gradient(105deg, transparent 42%, rgba(255,240,200,.16) 50%, transparent 58%);
    transform: translateX(-130%); animation: sheenSweep 2.4s ease-in-out 1s 1 both;
  }
}
@keyframes heroIn { from { transform: translateY(20px); } to { transform: none; } }
@keyframes heroMediaIn { from { transform: translateY(26px) scale(.985); } to { transform: none; } }
@keyframes sheenSweep { to { transform: translateX(130%); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

/* arch frame refinement */
.arch { border-width: 3px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,240,200,.25); }

/* ---------- Buttons: gold sheen on hover ---------- */
.btn { isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; z-index: 1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .65s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn > * { position: relative; z-index: 2; }

/* ---------- Dish cards: image zoom + gold edge ---------- */
.dish { border-radius: 5px; transition: transform .35s ease, box-shadow .35s ease; }
.dish__media { overflow: hidden; }
.dish__media .ph__img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.dish:hover .dish__media .ph__img { transform: scale(1.07); }
.dish:hover { box-shadow: 0 26px 60px -30px rgba(58,32,8,.5); }
.dish::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .35s ease;
}
.dish:hover::after { box-shadow: inset 0 0 0 1.5px var(--gold-soft); }

/* ---------- Section headers: refined ornament ---------- */
.divider-ornament::before, .divider-ornament::after { height: 1px; }

/* ---------- Page headers: more cinematic ---------- */
.page-head { padding-top: calc(var(--nav-h) + 84px); padding-bottom: 84px; }
.page-head .ph { opacity: .42; }
.page-head .ph .ph__img { animation: kenburns 22s ease-in-out infinite alternate; }
.page-head__title { letter-spacing: -.03em; }
.page-head::before {
  content: ""; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  width: 60px; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

/* ---------- Menu rows: refined hover ---------- */
.mi-row { transition: padding-left .25s ease; border-radius: 4px; }
.mi-row:hover { padding-left: 8px; }
.mi-row__name { transition: color .2s ease; }
.mi-row:hover .mi-row__name { color: var(--saffron); }

/* ---------- Nav: glassier when scrolled ---------- */
.nav.scrolled { background: rgba(255,253,248,.86); backdrop-filter: saturate(1.1) blur(12px); -webkit-backdrop-filter: saturate(1.1) blur(12px); }

/* ---------- Links & focus refinement ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px;
}

/* ---------- Featured section: editorial number watermark ---------- */
.section { position: relative; }

/* refined gold lockup contrast */
.lockup__rana { text-shadow: 0 2px 30px rgba(0,0,0,.25); }

/* footer: subtle warm glow */
.footer { background:
  radial-gradient(120% 90% at 50% 0%, rgba(94,20,24,.5), transparent 60%), var(--maroon-deep); }