/*
 * smakigo.css — companion to smakigo.html (Tailwind CSS version)
 * ================================================================
 * This file contains ONLY the styles that Tailwind utility classes
 * cannot express cleanly — pseudo-elements, custom keyframes used
 * with Tailwind's animation system, and a few complex selectors.
 *
 * HOW TO CUSTOMISE
 * ────────────────
 * Colours, fonts, spacing, radii → edit the tailwind.config block
 * inside smakigo.html (<script> tag in <head>).
 *
 *   To change brand colour (e.g. to orange):
 *     brand: { DEFAULT:'#E8420A', dark:'#B33200',
 *               light:'#FDDDD0', pale:'#FFF5F0' }
 *
 *   To change fonts:
 *   1. Swap the Google Fonts <link> URL in smakigo.html <head>
 *   2. Update fontFamily: { heading:['YourFont',...], body:['YourFont',...] }
 *
 *   Popular heading font options (google.com/fonts):
 *     'Poppins', 'Space Grotesk', 'Bricolage Grotesque',
 *     'Plus Jakarta Sans', 'Fraunces', 'Playfair Display'
 *
 *   Popular body font options:
 *     'Inter', 'Nunito', 'Outfit', 'DM Sans' (current), 'Lato'
 *
 * ================================================================
 */


/* ── SCROLL-REVEAL ANIMATION ──────────────────────────────────────
   Elements start invisible + shifted down, then .vis is added
   by the IntersectionObserver in the JS at bottom of smakigo.html.
   transition-delay is set inline with style="transition-delay:Xs"
   ─────────────────────────────────────────────────────────────── */
.fi {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fi.vis {
  opacity: 1;
  transform: none;
}


/* ── STEP CARDS — decorative number pseudo-element ────────────────
   Each step card has data-n="01" / "02" etc. Tailwind can't access
   attr() in content:, so this lives here.
   To change the number colour: edit var(--tw-brand-light) below,
   or replace with any hex — it's the faint watermark behind icons.
   ─────────────────────────────────────────────────────────────── */
.step-card {
  background: #ffffff;
  border: 1px solid #ECD8E5;          /* = bdr colour */
  border-radius: 22px;                /* = card-lg radius */
  padding: 1.8rem 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: attr(data-n);              /* shows "01", "02", etc. */
  position: absolute;
  right: 14px;
  top: 6px;
  font-family: 'Syne', sans-serif;   /* matches --font-heading */
  font-size: 3.8rem;
  font-weight: 800;
  color: #F7D6EA;                     /* = brand-light — faint watermark */
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(194, 0, 107, 0.1);
}

/*
 * TO CHANGE THE WATERMARK COLOUR of step numbers:
 * Replace #F7D6EA above with any colour.
 * e.g. for orange brand: #FDDDD0
 * e.g. for a blue brand: #D0E8FD
 */


/* ── CITIES TICKER ITEMS ──────────────────────────────────────────
   Each .ticker-item needs a coloured dot before it.
   Tailwind can't add ::before pseudo-elements via utilities alone.
   ─────────────────────────────────────────────────────────────── */
.ticker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8A7880;                     /* = gr colour */
  font-size: 0.85rem;
  white-space: nowrap;
}
.ticker-item::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: #C2006B;               /* = brand colour */
  border-radius: 50%;
  flex-shrink: 0;
}

/*
 * TO CHANGE DOT COLOUR: replace #C2006B above with your brand hex.
 * TO CHANGE TICKER SPEED: edit animation: { ticker: '...' } duration
 *   in the tailwind.config inside smakigo.html. Currently 24s.
 */


/* ── RESTAURANT SECTION — decorative bg circles ───────────────────
   Two large circles positioned outside the section bounds.
   Done here because Tailwind's -top/-right values don't go to -80px.
   ─────────────────────────────────────────────────────────────── */
#rest {
  position: relative;
  overflow: hidden;
}
#rest::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
}
#rest::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -60px;
  width: 280px; height: 280px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  pointer-events: none;
}


/* ── RESTAURANT CARD (inside phone mockup) — gradient thumbs ──────
   Already inlined as style="" on the divs in the HTML.
   Listed here for reference only — no extra CSS needed.
   ─────────────────────────────────────────────────────────────── */


/* ── MISC UTILITY — bg-white/97 ──────────────────────────────────
   Tailwind CDN doesn't generate arbitrary opacity variants like
   bg-white/97. This fills that gap for the commission card.
   ─────────────────────────────────────────────────────────────── */
.bg-white\/97 { background-color: rgba(255, 255, 255, 0.97); }

/*
 * ================================================================
 * QUICK REFERENCE — Tailwind config tokens (set in smakigo.html)
 * ================================================================
 *
 * COLOURS (theme.extend.colors):
 *   brand.DEFAULT  #C2006B   → bg-brand, text-brand, border-brand
 *   brand.dark     #8B004C   → hover:bg-brand-dark
 *   brand.light    #F7D6EA   → border-brand-light, progress bars
 *   brand.pale     #FDF0F7   → bg-brand-pale, notice boxes
 *   ink            #0F0A0D   → text-ink, bg-ink
 *   ink2           #3D2535   → text-ink2
 *   mist           #F9F4F7   → bg-mist (section backgrounds)
 *   gr             #8A7880   → text-gr (placeholder, captions)
 *   bdr            #ECD8E5   → border-bdr (card borders)
 *
 * FONTS (theme.extend.fontFamily):
 *   heading  'Syne'    → font-heading (h1–h4, logos, stats)
 *   body     'DM Sans' → font-body (paragraphs, buttons, inputs)
 *
 * BORDER RADIUS (theme.extend.borderRadius):
 *   card     14px → rounded-card  (cards, badges, tags)
 *   card-lg  22px → rounded-card-lg (large cards, modals)
 *
 * MAX-WIDTH (theme.extend.maxWidth):
 *   site  1120px → max-w-site (all section containers)
 *
 * ANIMATIONS (theme.extend.animation):
 *   pulse-dot  → pulseDot 2s infinite   (live badge dot)
 *   bob        → bob 3s ease-in-out     (phone floating elements)
 *   bob-delay  → bob 3.5s 0.5s infinite (second float element)
 *   ticker     → ticker 24s linear      (cities scrolling bar)
 *
 * BOX SHADOWS (theme.extend.boxShadow):
 *   phone  → shadow-phone  (main hero phone)
 *   float  → shadow-float  (floating badges)
 *   card   → shadow-card   (mission / about card)
 *
 * ================================================================
 */

/* ── MISSING ARBITRARY OPACITY VARIANTS ──────────────────────────
   These use non-standard opacity values that Tailwind v3 CDN
   safelist didn't capture. Added here to complete the stylesheet.
   ─────────────────────────────────────────────────────────────── */

/* Nav background — frosted glass effect */
.bg-white\/94 { background-color: rgba(255, 255, 255, 0.94); }

/* Used in restaurant section benefit cards */  
.border-white\/14 { border-color: rgba(255, 255, 255, 0.14); }

/* bg-black/8 — decorative circle on restaurant section */
.bg-black\/8 { background-color: rgba(0, 0, 0, 0.08); }