/* ==========================================================================
   BOSS SWEETS — "UTSAV" FESTIVE LAYER + 60FPS PERFORMANCE PASS
   Loaded after style.css (and after each page's inline <style>) so it wins.

   Palette (inspired by the marigold, sindoor and rani-pink in the hero film):
     Sindoor maroon  #7A1328   deep festive base (bars, footer)
     Vermilion       #D62839   celebration red (CTAs, accents)
     Marigold        #F59E0B   genda-phool orange (highlights)
     Rani pink       #D6336C   wedding pink (eyebrows, details)
     Mango leaf      #1E7B4F   auspicious green (tiny accents only)
     Edible gold     #C9971C   kept as the luxury thread
     Ivory           #FFF8EE   readable warm base
   ========================================================================== */

:root {
  --festive-maroon: #7A1328;
  --festive-maroon-deep: #4E0A19;
  --festive-vermilion: #D62839;
  --festive-marigold: #F59E0B;
  --festive-marigold-light: #FFC53D;
  --festive-rani: #D6336C;
  --festive-leaf: #1E7B4F;

  --bg-obsidian: #FFF8EE;
  --bg-cocoa-dark: #FCEBD7;
  --bg-surface: #FFFCF6;
  --bg-card: #FFFBF4;

  --text-cream: #2A0F0A;
  --text-cream-80: #4A2016;
  --text-muted: #6B3F2E;
  --text-dim: #9A6A55;

  --gold-primary: #C9971C;
  --gold-warm: #E2620F;
  --gold-dark: #8C5A08;
  --caramel-warm: #E2620F;

  --gold-gradient: linear-gradient(135deg, #FFD56B 0%, #F59E0B 45%, #E2620F 100%);
  --festive-cta: linear-gradient(135deg, #E23A3A 0%, #D62839 40%, #B3123A 100%);
  --festive-ribbon: linear-gradient(90deg, #D6336C 0%, #F59E0B 33%, #FFC53D 50%, #F59E0B 67%, #D62839 100%);
  --festive-heading: linear-gradient(100deg, #7A1328 0%, #B3123A 45%, #E2620F 100%);

  --border-gold-subtle: rgba(214, 51, 108, 0.22);
  --border-gold-light: rgba(245, 158, 11, 0.55);
  --border-glass: rgba(245, 158, 11, 0.22);
  --shadow-gold: 0 10px 26px -10px rgba(214, 40, 57, 0.45);
  --shadow-elevated: 0 18px 40px -14px rgba(122, 19, 40, 0.22);
}

/* Toran (festive bunting) pattern: marigold / rani / leaf flags. Static SVG = zero runtime cost */
:root {
  --toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='14' viewBox='0 0 54 14'%3E%3Cpath d='M0 0h18L9 13z' fill='%23F59E0B'/%3E%3Cpath d='M18 0h18l-9 13z' fill='%23D6336C'/%3E%3Cpath d='M36 0h18l-9 13z' fill='%23FFC53D'/%3E%3Ccircle cx='9' cy='4' r='1.6' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='27' cy='4' r='1.6' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='45' cy='4' r='1.6' fill='%237A1328' fill-opacity='.5'/%3E%3C/svg%3E");
}

html { scroll-behavior: auto; } /* JS handles anchor smoothing; native smooth fights the canvas lerp */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(214, 51, 108, 0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(245, 158, 11, 0.07), transparent 60%),
    var(--bg-obsidian);
}

::selection { background: var(--festive-rani); color: #fff; }
::-webkit-scrollbar-thumb { background: rgba(214, 51, 108, 0.45); }
::-webkit-scrollbar-thumb:hover { background: var(--festive-vermilion); }

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR + NAVBAR
   -------------------------------------------------------------------------- */
.royal-announcement-bar {
  background: linear-gradient(90deg, #4E0A19 0%, #7A1328 30%, #A3123A 50%, #7A1328 70%, #4E0A19 100%);
  border-bottom: 1px solid rgba(255, 197, 61, 0.55);
  box-shadow: none;
}
.announcement-ticker-track { color: #FFE7B0; }

html body .navbar,
html body .navbar:hover,
html body .navbar.scrolled {
  background: #FFFCF6 !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 18px -8px rgba(122, 19, 40, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 14px;
  background: var(--toran) repeat-x left top / 54px 14px;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(122, 19, 40, 0.18));
}
.navbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--festive-ribbon);
  pointer-events: none;
}
html body .nav-brand-note { color: var(--festive-vermilion) !important; }
html body .nav-link:hover,
html body .navbar .nav-link:hover {
  color: var(--festive-vermilion) !important;
  background: rgba(214, 51, 108, 0.09) !important;
}
html body .nav-mobile-toggle span { background: var(--festive-vermilion) !important; box-shadow: none; }

/* --------------------------------------------------------------------------
   SCROLLYTELLING STAGE (performance-critical)
   Nothing on top of the canvas may use backdrop-filter: it forces the GPU to
   re-blur every element on every canvas repaint, which is what caused the lag.
   -------------------------------------------------------------------------- */
.scrolly-section,
.scrolly-section *,
.flanking-track-container,
.flanking-track-container * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scrolly-sticky { will-change: auto; transform: none; contain: layout paint; }
#scrollCanvas {
  will-change: auto;
  transform: none;
  background: #2A0F0A url('../hero_v2/m/f001.jpg') center/cover no-repeat;
}
.canvas-vignette-overlay {
  will-change: auto;
  transform: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 248, 238, 0) 52%,
    rgba(255, 248, 238, 0.30) 74%,
    rgba(255, 248, 238, 0.85) 92%,
    var(--bg-obsidian) 100%);
}
.film-grain { display: none; } /* SVG turbulence noise is expensive to composite */

.scroll-indicator-thumb {
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  background: var(--festive-ribbon);
  box-shadow: none;
}
#scrollPrompt, #mobileSignaturesPeek { transition: opacity .35s ease; }
#scrollPrompt.is-hidden, #mobileSignaturesPeek.is-hidden { opacity: 0 !important; pointer-events: none !important; }

/* Flanking food cards: solid ivory + festive ribbon edge */
.flanking-food-card {
  background:
    linear-gradient(90deg, #D6336C, #F59E0B 50%, #D62839) top / 100% 4px no-repeat,
    linear-gradient(160deg, #FFFFFF 0%, #FFF8EE 60%, #FFEFD9 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.40);
  box-shadow: 0 14px 30px -12px rgba(122, 19, 40, 0.28);
  transition: transform .35s var(--ease-cinematic), box-shadow .35s ease;
}
.flanking-food-card:hover {
  border-color: var(--festive-marigold);
  box-shadow: 0 22px 40px -14px rgba(214, 40, 57, 0.40);
}
.flanking-card-badge {
  background: linear-gradient(135deg, #D6336C, #D62839);
  color: #FFF4D6;
  border: 1px solid rgba(255, 197, 61, 0.7);
  box-shadow: 0 2px 8px rgba(122, 19, 40, 0.25);
}
.flanking-card-img-wrap img { will-change: transform; }

/* Story overlays on the canvas get solid festive cards (no blur) */
.story-card-left,
.story-card-right,
.story-card-gifting,
.story-card-finale,
.story-card-center {
  background: rgba(255, 251, 244, 0.96) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY ACCENTS
   -------------------------------------------------------------------------- */
.section-eyebrow { color: var(--festive-rani); font-weight: 600; }
.section-title,
.slideshow-title,
.instagram-title,
.menu-page-title,
.branches-page-title {
  background: var(--festive-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--festive-maroon);
}

/* Ornamental dividers pick up marigold + rani */
.royal-sector-divider svg [fill^="url"],
.sector-flourish-crest svg path { fill: var(--festive-marigold); }
.royal-sector-divider::before,
.royal-sector-divider::after { background: linear-gradient(90deg, transparent, rgba(214, 51, 108, 0.55), rgba(245, 158, 11, 0.8)) !important; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary-luxury,
.btn-nav-cta,
.btn-instagram-follow,
.btn-insta-follow-pill,
.branch-call-btn,
.btn-form-submit {
  background: var(--festive-cta);
  color: #FFF8EC !important;
  border: 1px solid rgba(255, 197, 61, 0.6);
  box-shadow: 0 10px 22px -10px rgba(214, 40, 57, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary-luxury:hover,
.btn-nav-cta:hover,
.branch-call-btn:hover {
  box-shadow: 0 14px 28px -10px rgba(214, 40, 57, 0.7), 0 0 0 3px rgba(255, 197, 61, 0.35);
}
.btn-secondary-luxury {
  color: var(--festive-maroon);
  border-color: var(--festive-marigold) !important;
}
.btn-secondary-luxury:hover { background: rgba(245, 158, 11, 0.12); }
.menu-filter-btn.active,
.branch-filter-btn.active {
  background: var(--festive-cta) !important;
  color: #FFF8EC !important;
  border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   CARDS & SECTIONS
   -------------------------------------------------------------------------- */
.ingredient-card,
.press-card,
.menu-item-card,
.collection-card,
.branch-card,
.client-card,
.facility-card,
.official-service-card,
.story-metric-card {
  border-color: rgba(245, 158, 11, 0.38) !important;
  background:
    linear-gradient(90deg, #D6336C, #F59E0B 50%, #D62839) top / 100% 3px no-repeat,
    linear-gradient(160deg, #FFFFFF 0%, #FFF8EE 60%, #FFF0DC 100%) !important;
  transition: transform .35s var(--ease-cinematic), box-shadow .35s ease, border-color .35s ease !important;
}
.ingredient-card:hover,
.press-card:hover,
.menu-item-card:hover,
.collection-card:hover,
.branch-card:hover {
  border-color: var(--festive-marigold) !important;
  box-shadow: 0 20px 36px -16px rgba(214, 40, 57, 0.35) !important;
}

.slideshow-section {
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(245, 158, 11, 0.12), transparent 70%),
    radial-gradient(700px 400px at 90% 90%, rgba(214, 51, 108, 0.10), transparent 70%),
    var(--bg-obsidian);
}
.editorial-section#ingredients {
  background:
    linear-gradient(180deg, #FFF8EE 0%, #FFEFE4 100%);
}
.instagram-section {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(214, 51, 108, 0.08), transparent 70%),
    var(--bg-obsidian);
}
.slideshow-dot.active { background: var(--festive-vermilion) !important; }
.slideshow-nav-btn { color: var(--festive-maroon); border-color: rgba(245, 158, 11, 0.55); }
.slideshow-nav-btn:hover { background: var(--festive-marigold); color: #fff; }

/* --------------------------------------------------------------------------
   FOOTER — deep sindoor maroon with gold, topped by a toran
   -------------------------------------------------------------------------- */
.site-footer {
  --text-cream: #FFF3DF;
  --text-cream-80: #F6DCC0;
  --text-muted: #EBC9AA;
  --text-dim: #C99B82;
  --gold-primary: #FFC53D;
  --gold-warm: #FFB066;
  background:
    radial-gradient(900px 380px at 85% 0%, rgba(214, 51, 108, 0.35), transparent 70%),
    radial-gradient(700px 360px at 0% 100%, rgba(245, 158, 11, 0.18), transparent 70%),
    linear-gradient(180deg, #7A1328 0%, #4E0A19 100%);
  color: var(--text-cream);
  border-top: 0;
  margin-top: 14px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
  background: var(--toran) repeat-x left bottom / 54px 14px;
  transform: scaleY(-1);
}
.site-footer h2,
.site-footer h4,
.footer-brand h2 { color: #FFF3DF; }
.footer-column h4,
.footer-newsletter h4 { color: #FFC53D; }
.footer-link:hover,
.footer-legal-links a:hover { color: #FFC53D; }
.footer-bottom { border-top-color: rgba(255, 197, 61, 0.22); color: var(--text-dim); }
.footer-legal-links a { color: var(--text-muted); }
.site-footer .btn-primary-luxury {
  background: linear-gradient(135deg, #FFD56B, #F59E0B 55%, #E2620F);
  color: #4E0A19 !important;
}

/* --------------------------------------------------------------------------
   PERFORMANCE: skip rendering off-screen sections until they're near view
   -------------------------------------------------------------------------- */
.slideshow-section,
.editorial-section,
.instagram-section,
.menu-page-grid-section,
.branches-grid-section,
.clients-showcase-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Slideshow: only the visible slide is composited */
.slideshow-slide { will-change: auto; }
.slideshow-slide.active { will-change: opacity, transform; }

/* Phones: drop every remaining backdrop blur (biggest mobile GPU cost) */
@media (max-width: 900px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-nav-drawer { background: #FFFCF6 !important; }
  .mobile-nav-overlay { background: rgba(42, 15, 10, 0.55) !important; }
  .navbar::after { height: 10px; bottom: -9px; background-size: 40px 10px; }
  .ambient-dust { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   BRAND LOGO — recreated from the shop signboard:
   red badge, cream upright script "Boss Sweets" (Grand Hotel, slightly
   thickened to match the painted strokes), Bengali tagline in Galada tucked
   under the right-hand side.
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.bs-logo-link { display: inline-flex; text-decoration: none; }
.bs-logo {
  --logo-size: 1.72rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .36em .7em .34em .66em;
  font-size: var(--logo-size);
  background: linear-gradient(180deg, #C83133 0%, #BF2A2C 55%, #B02326 100%);
  color: #F8EFDD;
  border-radius: .26em;
  box-shadow:
    0 0 0 1.5px #4A1012,
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 4px 10px -4px rgba(74, 16, 18, .55);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.bs-logo-word {
  font-family: 'Grand Hotel', 'Galada', cursive;
  font-size: 1.04em;
  font-weight: 400;
  letter-spacing: .13em;
  line-height: 1.08;
  padding: 0 .04em;
  margin-right: -.13em; /* cancel trailing letter-space */
  -webkit-text-stroke: .025em currentColor; /* signboard strokes are a touch heavier */
  text-shadow: 0 1px 0 rgba(60, 10, 12, .35);
}
.bs-logo-tag {
  align-self: flex-end;
  font-family: 'Galada', 'Noto Sans Bengali', sans-serif;
  font-size: .46em;
  letter-spacing: .02em;
  margin-top: -.06em;
  color: #FBF3E4;
  opacity: .95;
}
.nav-brand .bs-logo { transition: transform .2s ease; }
.nav-brand:hover .bs-logo { transform: rotate(-1.2deg) scale(1.03); }

/* On maroon (drawer header, footer) the badge gets a cream keyline */
.mobile-nav-header .bs-logo,
.site-footer .bs-logo {
  box-shadow:
    0 0 0 1.5px rgba(255, 243, 223, .9),
    0 0 0 3px rgba(74, 16, 18, .9),
    0 6px 16px -6px rgba(0, 0, 0, .5);
}
.mobile-nav-header .bs-logo { --logo-size: 1.25rem; }
.footer-brand h2.bs-logo-footer { margin-bottom: 18px; line-height: 1; }
.site-footer .bs-logo { --logo-size: 2.05rem; }

@media (max-width: 900px) {
  .nav-brand .bs-logo { --logo-size: 1.2rem; }
  .site-footer .bs-logo { --logo-size: 1.7rem; }
}
@media (max-width: 360px) {
  .nav-brand .bs-logo { --logo-size: 1.08rem; }
}
/* Old footer rule colours every span in the h2 gold; keep the badge cream */
.footer-brand h2.bs-logo-footer .bs-logo,
.footer-brand h2.bs-logo-footer .bs-logo span { color: #F8EFDD; }
.footer-brand h2.bs-logo-footer .bs-logo-tag { color: #FBF3E4; }

/* ==========================================================================
   HERO PHOTO SCENE (replaces the frame-by-frame film)
   Six festive photos, steady push-in, focus-pull hand-overs. Only transform
   and opacity change while scrolling, so the GPU does all the work.
   ========================================================================== */
.hero-scene { position: absolute; inset: 0; overflow: hidden; background: #2A0F0A; z-index: 3; }
.hero-shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: opacity; }
.hero-shot:first-child { opacity: 1; visibility: visible; background: #C98A90 url('../hero_scene2/b/celebration.jpg') center / cover no-repeat; }
.hero-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.hero-cam img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.hero-cam img.hero-soft { opacity: 0; will-change: opacity; }
.hero-bloom { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(75% 70% at 50% 50%, rgba(255, 196, 110, .55), rgba(214, 120, 40, .35) 55%, rgba(60, 18, 8, .35) 100%); }
.hero-grade { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(26, 8, 6, .38) 100%),
    linear-gradient(180deg, rgba(26, 8, 6, .28) 0%, transparent 16%, transparent 100%); }
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }

/* only a soft fade into the page at the very bottom; the photos stay rich */
.scrolly-section .canvas-vignette-overlay {
  background: linear-gradient(180deg, transparent 0%, transparent 84%, rgba(255, 248, 238, .55) 94%, var(--bg-obsidian) 100%) !important;
}

/* opening title over the first photo */
.hero-title { position: absolute; z-index: 12; left: 0; right: 0; top: 50%; margin-top: -7.5rem; padding-inline: 16px;
  text-align: center; pointer-events: none; will-change: opacity, transform; }
.hero-title::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); height: 22rem; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(26, 8, 6, .62), rgba(26, 8, 6, .25) 60%, transparent); z-index: -1; }
.hero-title-badge { display: inline-flex; flex-direction: column; align-items: center; padding: .55rem 1.6rem .7rem; background: #D62839;
  border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 243, 223, .85) inset, 0 18px 40px -12px rgba(0, 0, 0, .6); }
.hero-title-badge b { font: 400 clamp(2.4rem, 7vw, 4.2rem)/1 'Grand Hotel', 'Brush Script MT', cursive; color: #FFF3DF; }
.hero-title-badge span { font: 400 clamp(.75rem, 2vw, .95rem)/1.3 'Galada', 'Noto Sans Bengali', sans-serif; color: #FFF3DF; opacity: .92; }
.hero-title-bn { margin: 1.3rem 0 .3rem; font: 400 clamp(2rem, 6.5vw, 3.6rem)/1.15 'Galada', 'Noto Sans Bengali', sans-serif; color: #FFD56B;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero-title-en { margin: 0; font: 400 clamp(.8rem, 2vw, .95rem)/1.5 'Marcellus', Georgia, serif; letter-spacing: .22em; text-transform: uppercase;
  color: #FFF3DF; opacity: .9; }

/* phones and tablets: a little more scroll per photo so each one can breathe */
@media (max-width: 1024px) {
  .scrolly-section { min-height: 460vh; }
}
@media (max-width: 767px) {
  .hero-title { margin-top: -9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dust { display: none; }
}