/* ============================================================================
   illos-gfx.css — graphics levels per DEVICE (not per screen size)
   ----------------------------------------------------------------------------
   Loaded LAST, after illos.css and tailwind.css, on every public page and in
   the admin panel. The level class on <html> is set before the first paint by
   the inline script from assets/js/illos-gfx-boot.js:

     html.gfx-low    old/weak phones & tablets, data-saver, slow networks
     html.gfx-mid    ordinary devices — illos.css as designed (no overrides)
     html.gfx-high   strong phones, tablets and computers — full effects on
                     every screen size, plus assets/js/illos-hifi.js

   Also set when the browser lacks a feature:
     html.no-backdrop  no backdrop-filter (old Android WebView, old Firefox)
     html.no-aspect    no aspect-ratio   (iOS < 15, Chrome < 88)

   Every selector starts with html.gfx-* so it outranks illos.css's media
   queries without !important (except where illos.css itself uses it).
   ========================================================================== */


/* Twelve extra embers are printed by head.php for the high level only. */
.bg-embers i.ember-hi { display: none; }


/* ---------------------------------------------------------------------------
   1. LOW — fast and light
   ------------------------------------------------------------------------- */

/* Background: keep the colour and the soft gold glow, drop every moving or
   blurred layer. A blurred, animated, full-screen layer is the single most
   expensive thing an old GPU can be asked to do. */
html.gfx-low .bg-beams,
html.gfx-low .bg-aurora,
html.gfx-low .bg-grain,
html.gfx-low .bg-embers { display: none; }

html.gfx-low .bg-mesh { animation: none; }

html.gfx-low .bg-orbs i {
  animation: none;
  filter: none;            /* the radial gradients are already soft */
  will-change: auto;
  opacity: 0.4;
}

/* Frosted glass -> solid panels. Same look at a glance, no per-frame blur. */
html.gfx-low .glass,
html.gfx-low .tl-card,
html.gfx-low .modal-scrim,
html.gfx-low .cart-scrim,
html.gfx-low .busy-veil,
html.gfx-low .ad-shell,
html.gfx-low .lightbox__scrim,
html.gfx-low .lightbox__x,
html.gfx-low .admin-topbar,
html.gfx-low .a-modal,
html.no-backdrop .glass,
html.no-backdrop .tl-card,
html.no-backdrop .admin-topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.gfx-low .glass,
html.no-backdrop .glass        { background: rgba(18, 18, 18, 0.96); }
html.gfx-low .modal-scrim,
html.gfx-low .cart-scrim,
html.gfx-low .lightbox__scrim,
html.no-backdrop .modal-scrim,
html.no-backdrop .cart-scrim,
html.no-backdrop .lightbox__scrim { background-color: rgba(0, 0, 0, 0.86); }
html.gfx-low .busy-veil,
html.no-backdrop .busy-veil    { background-color: rgba(8, 8, 8, 0.92); }
html.gfx-low .admin-topbar,
html.no-backdrop .admin-topbar { background-color: rgba(12, 12, 12, 0.97); }

/* Hero: no slow zoom (it re-rasterises a video frame every tick). */
html.gfx-low .hero-stage video,
html.gfx-low .hero-stage .hero-fallback,
html.gfx-low .venue-hero__shot,
html.gfx-low .tray-hero__shot,
html.gfx-low .prive-hero__wash { animation: none; transform: none; }

/* Every dish, venue and Privè card paints a heavily blurred copy of its photo
   behind the picture. Dozens of 22-26px blurs is too much for an old phone;
   the plain dark tile behind them looks clean on its own. */
html.gfx-low .dish-media::before,
html.gfx-low .venue-shot,
html.gfx-low .prive-page__wash { display: none; }

/* Text and decoration loops that run forever. */
html.gfx-low .text-gold-shimmer { animation: none; background-position: 50% 0; }
html.gfx-low .float-slow,
html.gfx-low .pulse-ring::before { animation: none; }
html.gfx-low .pulse-ring::before { display: none; }
html.gfx-low .sheen::after,
html.gfx-low .brand-sheen,
html.gfx-low .brand-halo { display: none; }

/* Reveals: a short fade only. No travel, no blur, no 3D. */
html.gfx-low.js [data-reveal] {
  transition: opacity 360ms ease-out;
  transform: none;
  filter: none;
  will-change: auto;
}
html.gfx-low.js [data-reveal-group] > * {
  transition: opacity 320ms ease-out;
  transform: none;
}
html.gfx-low.js [data-reveal-group].is-visible > * { transition-delay: 0s; }

/* Hover lifts and image zooms only cost paint time on a weak device. */
html.gfx-low .card-lift,
html.gfx-low .card-lift .card-media img,
html.gfx-low .brand-card,
html.gfx-low .venue-card { will-change: auto; }
html.gfx-low .card-lift:hover,
html.gfx-low .brand-card:hover,
html.gfx-low .venue-card:hover { transform: none; }
html.gfx-low .card-lift:hover .card-media img,
html.gfx-low .card-lift:hover .dish-photo,
html.gfx-low .brand-card:hover .brand-mark { transform: none; filter: none; }

/* Big soft shadows are expensive to paint while scrolling. */
html.gfx-low .card-lift:hover,
html.gfx-low .brand-card:hover { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3); }
html.gfx-low .brand-mark { filter: none; }

/* Marquee keeps running (it carries content) but slower = fewer repaints. */
html.gfx-low .marquee-track { animation-duration: 40s; }

/* Long pages: let the browser skip rendering sections far off-screen. */
html.gfx-low footer { content-visibility: auto; contain-intrinsic-size: 1px 520px; }


/* ---------------------------------------------------------------------------
   2. HIGH — full graphics on every screen size
   ---------------------------------------------------------------------------
   illos.css trims the background on tablets (<1024px) and phones (<768px)
   because it cannot tell a flagship phone from a budget one. On a device we
   know is strong, the trimmed layers come back.
   ------------------------------------------------------------------------- */
html.gfx-high .bg-beams  { display: block; animation: beams-turn 120s linear infinite; filter: blur(22px); }
html.gfx-high .bg-aurora { animation: aurora-drift 34s var(--ease-in-out) infinite alternate; filter: blur(16px); }
html.gfx-high .bg-mesh   { animation: mesh-pan 60s linear infinite; }
html.gfx-high .bg-orbs i { filter: blur(60px); opacity: 0.6; }
html.gfx-high .bg-embers i { display: block; }

/* Orb parallax is driven by illos-hifi.js; a short transition keeps it smooth. */
html.gfx-high .bg-orbs { will-change: transform; }

html.gfx-high .hero-stage video,
html.gfx-high .hero-stage .hero-fallback { animation: hero-push 26s var(--ease-in-out) infinite alternate; }

/* Hero depth: the media sits slightly lower as you scroll (set by hifi). */
html.gfx-high .hifi-hero video,
html.gfx-high .hifi-hero .hero-fallback { top: var(--hero-shift, 0px); }

/* Richer glass on strong GPUs. */
html.gfx-high .glass {
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* Gold text gets a soft glow. */
html.gfx-high .text-gold-shimmer {
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.28));
}

/* Gold dust canvas from illos-hifi.js. */
.bg-dust {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
.bg-dust.is-on { opacity: 0.9; }

/* 3D card tilt (mouse/trackpad only; set by illos-hifi.js). */
html.gfx-high.hifi-on .card-lift.is-tilting,
html.gfx-high.hifi-on .brand-card.is-tilting,
html.gfx-high.hifi-on .venue-card.is-tilting {
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translateY(-8px);
  transition: transform 140ms ease-out, box-shadow 480ms var(--ease-out), border-color 480ms var(--ease-out);
}
/* Gold glare follows the cursor (brand cards are already position:relative). */
html.gfx-high.hifi-on .brand-card.is-tilting::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(420px circle at var(--glare-x, 50%) var(--glare-y, 50%),
              rgba(255, 236, 170, 0.14), transparent 45%);
}


/* ---------------------------------------------------------------------------
   3. MID — no overrides. illos.css as designed.
   ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   4. OLD-BROWSER FALLBACKS (any level)
   ------------------------------------------------------------------------- */

/* iOS < 15 / Chrome < 88: no aspect-ratio. Give the image boxes a height so
   cards do not collapse to zero. */
html.no-aspect .brand-plate  { height: 120px; }
html.no-aspect .venue-media  { height: 340px; }
html.no-aspect .card-media   { min-height: 200px; }

/* iOS < 15.4: no 100dvh — the vh line before it in illos.css already covers
   that. iOS < 14.5: no `inset` — top/right/bottom/left were added beside every
   inset in the rebuilt CSS files. */


/* ---------------------------------------------------------------------------
   5. REDUCED MOTION always wins, at every level.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.gfx-high .bg-beams,
  html.gfx-high .bg-aurora,
  html.gfx-high .bg-mesh,
  html.gfx-high .hero-stage video,
  html.gfx-high .hero-stage .hero-fallback { animation: none !important; }
  .bg-dust { display: none; }
}

@media print {
  .bg-dust { display: none; }
}