/* site.css — shared bits every public page uses: cookie banner, sticky
   mobile call-to-action bar, button loading state, form error state.
   Colours fall back to the café palette if a page doesn't define them. */

/* ---------- cookie / analytics consent banner ---------- */
.skc-consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1000;
  max-width:560px; margin:0 auto; padding:18px 20px;
  background:var(--espresso,#241811); color:var(--cream,#f6ede0);
  border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35);
  font:400 .9rem/1.5 var(--font-body,'Work Sans',system-ui,sans-serif);
  transform:translateY(160%); transition:transform .35s ease;
}
.skc-consent.show{ transform:translateY(0); }
.skc-consent p{ margin:0 0 12px; }
.skc-consent a{ color:var(--brass,#b08d57); }
.skc-consent .skc-consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.skc-consent button{
  font:500 .78rem var(--font-mono,'JetBrains Mono',monospace); letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:10px 18px; cursor:pointer; border:1px solid transparent;
}
.skc-consent .skc-accept{ background:var(--clay,#c1693c); color:#fff; }
.skc-consent .skc-accept:hover{ background:var(--clay-deep,#8c3d2e); }
.skc-consent .skc-decline{ background:transparent; color:var(--cream,#f6ede0); border-color:rgba(255,255,255,.35); }
.skc-consent .skc-decline:hover{ border-color:rgba(255,255,255,.7); }

/* ---------- sticky mobile call-to-action bar ---------- */
.skc-mcta{ display:none; }
@media (max-width:760px){
  .skc-mcta{
    display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(36,24,17,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -8px 24px rgba(0,0,0,.2);
  }
  .skc-mcta a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px;
    border-radius:12px; text-decoration:none; font:600 .92rem var(--font-body,'Work Sans',system-ui,sans-serif);
    color:var(--cream,#f6ede0); border:1px solid rgba(255,255,255,.22);
  }
  .skc-mcta a.primary{ background:var(--clay,#c1693c); border-color:var(--clay,#c1693c); color:#fff; }
  body.has-mcta{ padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important; }
  body.has-mcta .skc-consent{ bottom:84px; }
  /* the homepage's floating "Order now" pill is replaced by the bar on phones */
  body.has-mcta .floating-order-btn{ display:none !important; }
}

/* ---------- button loading state ---------- */
.skc-busy{ position:relative; pointer-events:none; opacity:.85; }
.skc-busy::before{
  content:""; display:inline-block; width:1em; height:1em; margin-right:.55em; vertical-align:-.15em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:skc-spin .7s linear infinite;
}
@keyframes skc-spin{ to{ transform:rotate(360deg); } }

/* skeleton shimmer for content that's still loading */
.skc-skeleton{
  background:linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63%);
  background-size:400% 100%; animation:skc-shimmer 1.4s ease infinite; border-radius:12px; min-height:90px;
}
@keyframes skc-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---------- form error state ---------- */
.skc-invalid,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{
  border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.15) !important;
}
.skc-field-msg{ display:block; margin-top:6px; color:#c0392b; font-size:.82rem; line-height:1.35; }
.skc-error-box{
  background:#fdecea; color:#8e2a20; border:1px solid #f5c2bc; border-radius:10px;
  padding:10px 14px; font-size:.9rem;
}
.skc-error-box:empty{ display:none; }

@media (prefers-reduced-motion:reduce){
  .skc-consent{ transition:none; }
  .skc-busy::before, .skc-skeleton{ animation:none; }
}

/* ---------- festival popup (Diwali sweet orders) ---------- */
.skc-promo-backdrop{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(20,8,4,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .35s ease;
}
.skc-promo-backdrop.show{ opacity:1; }
.skc-promo{
  position:relative; width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto;
  border-radius:24px; color:#fff6e6; text-align:center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,190,90,.28), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(255,120,40,.25), transparent 60%),
    linear-gradient(170deg,#4a0f1c 0%,#2a0712 55%,#1a0409 100%);
  border:1.5px solid rgba(255,200,110,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 6px rgba(255,200,110,.08);
  transform:translateY(24px) scale(.96); transition:transform .45s cubic-bezier(.2,.9,.3,1.2);
  font-family:var(--font-body,'Work Sans',system-ui,sans-serif);
}
.skc-promo-backdrop.show .skc-promo{ transform:none; }
.skc-promo-art{ position:relative; height:190px; overflow:hidden; border-radius:22px 22px 0 0; }
.skc-promo-art svg{ position:absolute; inset:0; width:100%; height:100%; }
.skc-promo-body{ padding:6px 26px 26px; }
.skc-promo-kicker{ font:600 .72rem var(--font-mono,'JetBrains Mono',monospace); letter-spacing:.2em; text-transform:uppercase; color:#ffc76b; }
.skc-promo h2{
  margin:8px 0 2px; font-family:var(--font-display,'Fraunces',serif); font-style:italic; font-weight:500;
  font-size:clamp(1.9rem,7vw,2.4rem); line-height:1.05;
  background:linear-gradient(90deg,#ffd98a,#fff3d6,#ffb347); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.skc-promo .skc-promo-ta{ margin:0 0 12px; font-size:1rem; color:#ffd59a; }
.skc-promo p.skc-promo-msg{ margin:0 0 18px; font-size:.97rem; line-height:1.55; color:#f7e6cc; }
.skc-promo-actions{ display:flex; flex-direction:column; gap:10px; }
.skc-promo-actions a{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:999px;
  text-decoration:none; font-weight:600; font-size:.98rem;
}
.skc-promo-actions .primary{ background:linear-gradient(90deg,#ffb347,#ff8c2b); color:#3a0a12; box-shadow:0 8px 22px rgba(255,140,43,.35); }
.skc-promo-actions .primary:hover{ filter:brightness(1.06); }
.skc-promo-actions .ghost{ color:#ffe3b3; border:1px solid rgba(255,210,140,.45); }
.skc-promo-actions .ghost:hover{ background:rgba(255,210,140,.08); }
.skc-promo-note{ margin:14px 0 0; font-size:.78rem; color:rgba(255,236,205,.65); }
.skc-promo-close{
  position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,220,160,.5); background:rgba(30,6,10,.55); color:#fff2d9; font-size:1.3rem; line-height:1; cursor:pointer;
}
.skc-promo-close:hover{ background:rgba(60,12,20,.8); }

/* diya flames and sparkles */
.skc-flame{ transform-box:fill-box; transform-origin:50% 100%; animation:skc-flicker 1.1s ease-in-out infinite alternate; }
.skc-flame.d2{ animation-duration:.9s; animation-delay:.2s; }
.skc-flame.d3{ animation-duration:1.3s; animation-delay:.4s; }
@keyframes skc-flicker{
  0%{ transform:scale(1,1) rotate(-2deg); opacity:.95; }
  50%{ transform:scale(.92,1.08) rotate(2deg); opacity:1; }
  100%{ transform:scale(1.05,.94) rotate(-1deg); opacity:.9; }
}
.skc-glow{ animation:skc-glow 1.6s ease-in-out infinite alternate; }
@keyframes skc-glow{ from{ opacity:.55; } to{ opacity:.95; } }
.skc-spark{ animation:skc-twinkle 2.2s ease-in-out infinite; }
@keyframes skc-twinkle{ 0%,100%{ opacity:.15; transform:scale(.6); } 50%{ opacity:1; transform:scale(1); } }
.skc-spark{ transform-box:fill-box; transform-origin:center; }
.skc-rangoli{ transform-box:fill-box; transform-origin:center; animation:skc-turn 40s linear infinite; }
@keyframes skc-turn{ to{ transform:rotate(360deg); } }

/* countdown line for the popup's 5-second auto-close */
.skc-promo-timer{ position:absolute; left:0; right:0; top:0; height:4px; z-index:3; background:rgba(255,220,160,.15); border-radius:24px 24px 0 0; overflow:hidden; }
.skc-promo-timer span{ display:block; height:100%; background:linear-gradient(90deg,#ffb347,#ffe29a); transform-origin:left center; transform:scaleX(1); }

/* corner card: always on screen, bottom-right, while the festival runs */
.skc-promo-dock{
  position:fixed; right:18px; bottom:18px; z-index:950; display:flex; align-items:center; gap:10px;
  max-width:240px; padding:8px 16px 8px 8px; border-radius:18px; cursor:pointer; text-align:left;
  border:1.5px solid rgba(255,200,110,.7); color:#fff3dc;
  background:radial-gradient(120% 120% at 20% 0%, rgba(255,190,90,.25), transparent 60%), linear-gradient(160deg,#5a1222,#2a0712);
  box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 4px rgba(255,200,110,.12);
  font-family:var(--font-body,'Work Sans',system-ui,sans-serif);
  transform:translateY(140%); opacity:0; transition:transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.skc-promo-dock.show{ transform:none; opacity:1; }
.skc-promo-dock:hover{ box-shadow:0 14px 36px rgba(0,0,0,.4), 0 0 0 5px rgba(255,200,110,.22); }
.skc-promo-dock:focus-visible{ outline:3px solid #ffd98a; outline-offset:3px; }
.skc-dock-art{ flex:0 0 48px; width:48px; height:48px; border-radius:14px; background:rgba(0,0,0,.25); display:block; }
.skc-dock-art svg{ width:100%; height:100%; display:block; }
.skc-dock-text{ display:flex; flex-direction:column; line-height:1.2; }
.skc-dock-text strong{ font-family:var(--font-display,'Fraunces',serif); font-style:italic; font-weight:500; font-size:1.05rem; color:#ffd98a; }
.skc-dock-text small{ font-size:.78rem; color:#f7e0bd; margin-top:2px; }
/* keep clear of the homepage's floating "Order Now" button on desktop */
body:has(.floating-order-btn) .skc-promo-dock{ bottom:86px; }
@media (max-width:760px){
  .skc-promo-dock{ right:12px; bottom:12px; padding:6px 12px 6px 6px; border-radius:16px; }
  .skc-dock-art{ flex-basis:40px; width:40px; height:40px; border-radius:12px; }
  .skc-dock-text strong{ font-size:.92rem; }
  .skc-dock-text small{ font-size:.72rem; }
  body.has-mcta .skc-promo-dock{ bottom:calc(80px + env(safe-area-inset-bottom)); }
  body.has-mcta .skc-consent{ bottom:152px; }
}

@media (prefers-reduced-motion:reduce){
  .skc-promo-backdrop, .skc-promo, .skc-promo-dock{ transition:none; }
  .skc-flame, .skc-glow, .skc-spark, .skc-rangoli{ animation:none; }
}

/* ---------- scroll effects on every public page ----------
   Elements get data-rv="<effect>" from site.js and stay hidden only until
   they scroll into view; the keyframes animate FROM the hidden state to the
   element's own normal style, so nothing about the final look changes.
   Without JS, or with "reduce motion" on, none of this applies. */
.skc-rv-on [data-rv]:not(.rv-in){ opacity:0; }
.skc-rv-on [data-rv].rv-in{ animation-duration:.85s; animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-fill-mode:both; animation-delay:var(--rv-d,0ms); }
.skc-rv-on [data-rv="up"].rv-in{ animation-name:skc-rv-up; }
.skc-rv-on [data-rv="left"].rv-in{ animation-name:skc-rv-left; }
.skc-rv-on [data-rv="right"].rv-in{ animation-name:skc-rv-right; }
.skc-rv-on [data-rv="zoom"].rv-in{ animation-name:skc-rv-zoom; animation-duration:1.2s; }
.skc-rv-on [data-rv="mask"].rv-in{ animation-name:skc-rv-mask; animation-duration:1s; }
.skc-rv-on [data-rv="pop"].rv-in{ animation-name:skc-rv-pop; animation-timing-function:cubic-bezier(.3,1.4,.5,1); }
@keyframes skc-rv-up{ from{ opacity:0; transform:translateY(38px); } }
@keyframes skc-rv-left{ from{ opacity:0; transform:translateX(-48px); } }
@keyframes skc-rv-right{ from{ opacity:0; transform:translateX(48px); } }
@keyframes skc-rv-zoom{ from{ opacity:0; transform:scale(1.08); filter:saturate(.6); } }
@keyframes skc-rv-mask{ from{ opacity:0; transform:translateY(22px); clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 -20% 0); } }
@keyframes skc-rv-pop{ from{ opacity:0; transform:scale(.86) translateY(16px); } }

/* reading progress along the top edge */
.skc-progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:1001; pointer-events:none; }
.skc-progress span{ display:block; height:100%; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,var(--clay,#c1693c),var(--brass,#b08d57),#ffcf6b); box-shadow:0 0 10px rgba(255,180,90,.6); }

/* photos that drift slightly slower than the page (set by site.js) */
[data-parallax]{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .skc-rv-on [data-rv]{ opacity:1 !important; animation:none !important; }
  .skc-progress{ display:none; }
}
@media print{
  .skc-rv-on [data-rv]{ opacity:1 !important; animation:none !important; }
  .skc-progress, .skc-promo-dock, .skc-mcta, .skc-consent{ display:none !important; }
}