/* =================================================================
   LIQUID GLASS FX — shared across all pages
   Rotating iridescent conic rims + richer glass.
   Desktop: on hover.  Mobile (touch, no hover): always-on spin on
   hero elements + a bright burst on :active tap.
   Performance: the angle-driven conic repaints per frame, so the
   always-on spin is limited to a small curated set of hero elements.
   ================================================================= */

@property --lgfx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes lgfx-spin {
  to { --lgfx-angle: 360deg; }
}

@keyframes lgfx-pulse-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 0 14px rgba(0,220,255,0.16),
      0 0 26px rgba(175,95,255,0.1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.26),
      0 0 22px rgba(0,220,255,0.26),
      0 0 40px rgba(175,95,255,0.18),
      0 0 56px rgba(255,90,175,0.1);
  }
}

/* The iridescent palette (matches landing) */
:root {
  --lgfx-conic: conic-gradient(
    from var(--lgfx-angle),
    rgba(0, 220, 255, 0.85) 0deg,
    rgba(90, 150, 255, 0.80) 52deg,
    rgba(175, 100, 255, 0.78) 104deg,
    rgba(255, 90, 180, 0.76) 156deg,
    rgba(255, 140, 60, 0.74) 208deg,
    rgba(255, 215, 80, 0.70) 260deg,
    rgba(80, 235, 160, 0.74) 312deg,
    rgba(0, 220, 255, 0.85) 360deg
  );
  --lgfx-spin-dur: 6s;
  --lgfx-spin-dur-slow: 9s;
}

/* ----------------------------------------------------------------
   Reusable rotating rim — apply via .lgfx-rim or the curated
   selectors below. Uses ::before with a masked conic ring.
   ---------------------------------------------------------------- */
.lgfx-rim {
  position: relative;
  isolation: isolate;
}

.lgfx-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--lgfx-conic);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(0.6px) brightness(1.1) saturate(1.3);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* =================================================================
   DESKTOP — rotating rim on hover, across calendar / plans / entity
   ================================================================= */
@media (hover: hover) and (pointer: fine) {
  .category-page--games .gc-today,
  .category-page--games .gc-platform-chip,
  .category-page--games .gc-icon-btn,
  .category-page--games .gc-segment,
  .category-page--games .gc-day__more,
  .category-page--games .gc-follow,
  .category-page--games .gc-share,
  .category-page--games .gc-entity-chip,
  .category-page--games .gc-game-sheet__store-row,
  .category-page--games .gc-entity-hero__follow,
  .category-page--games .gc-entity-hero__follow-circle,
  .page-plans .plan-card {
    position: relative;
    isolation: isolate;
  }

  .category-page--games .gc-today::after,
  .category-page--games .gc-icon-btn::after,
  .category-page--games .gc-day__more::after,
  .category-page--games .gc-follow::after,
  .category-page--games .gc-share::after,
  .category-page--games .gc-entity-chip::after,
  .category-page--games .gc-entity-hero__follow::after,
  .category-page--games .gc-entity-hero__follow-circle::after,
  .page-plans .plan-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: var(--lgfx-conic);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(0.6px) brightness(1.12) saturate(1.34);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .category-page--games .gc-today:hover::after,
  .category-page--games .gc-icon-btn:hover::after,
  .category-page--games .gc-day__more:hover::after,
  .category-page--games .gc-follow:hover::after,
  .category-page--games .gc-share:hover::after,
  .category-page--games .gc-entity-chip:hover::after,
  .category-page--games .gc-entity-hero__follow:hover::after,
  .category-page--games .gc-entity-hero__follow-circle:hover::after,
  .page-plans .plan-card:hover::after {
    opacity: 1;
    animation: lgfx-spin var(--lgfx-spin-dur) linear infinite;
    will-change: --lgfx-angle;
  }

  /* Highlighted plan card spins faster + glows */
  .page-plans .plan-card--highlight:hover::after {
    animation-duration: var(--lgfx-spin-dur) ;
    filter: blur(0.8px) brightness(1.18) saturate(1.4);
  }

  /* Platform chips reserve ::after/::before for title tooltips — ring lives on icon */
  .category-page--games .gc-platform-chip .gc-platform-chip__icon {
    position: relative;
    border-radius: inherit;
  }

  .category-page--games .gc-platform-chip .gc-platform-chip__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: var(--lgfx-conic);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(0.6px) brightness(1.12) saturate(1.34);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .category-page--games .gc-platform-chip:hover .gc-platform-chip__icon::before,
  .category-page--games .gc-platform-chip:focus-visible .gc-platform-chip__icon::before {
    opacity: 1;
    animation: lgfx-spin var(--lgfx-spin-dur) linear infinite;
    will-change: --lgfx-angle;
  }
}

/* =================================================================
   MOBILE — no hover, so hero elements get an ALWAYS-ON subtle spin,
   and a bright burst on tap (:active). Curated set only (perf).
   ================================================================= */
@media (hover: none), (max-width: 900px) {

  /* Hero elements that always show a gentle rotating rim
     (calendar toolbar chips excluded — too many nodes, hurts mobile FPS) */
  .category-page--games .gc-game-sheet__status:not(.gc-game-sheet__status--muted),
  .category-page--games .gc-follow--panel-head,
  .category-page--games .gc-entity-hero__follow,
  .category-page--games .gc-entity-hero__follow-circle,
  .page-plans .plan-card--highlight {
    position: relative;
    isolation: isolate;
  }

  .category-page--games .gc-game-sheet__status:not(.gc-game-sheet__status--muted)::after,
  .category-page--games .gc-follow--panel-head::after,
  .category-page--games .gc-entity-hero__follow::after,
  .category-page--games .gc-entity-hero__follow-circle::after,
  .page-plans .plan-card--highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--lgfx-conic);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(0.5px) brightness(1.05) saturate(1.25);
    opacity: 0.7;
    animation: lgfx-spin var(--lgfx-spin-dur-slow) linear infinite;
    will-change: --lgfx-angle;
    pointer-events: none;
  }

  /* Tap burst — game sheet / plans only (not calendar chrome) */
  .category-page--games .gc-follow:active::after,
  .page-plans .plan-card:active::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: var(--lgfx-conic);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 1;
    filter: blur(0.7px) brightness(1.25) saturate(1.45);
    animation: lgfx-spin 2.5s linear infinite;
  }

  /* Plans CTAs — reuse their own ::before ring on tap (mobile) */
  .page-plans .plan-card__cta:active::before {
    opacity: 1 !important;
  }
  /* Every plan CTA shows a gentle always-on ring on mobile (not just highlighted) */
  .page-plans .plan-card__cta::before {
    opacity: 0.4;
  }
}

/* =================================================================
   RICHER LIQUID GLASS — animated specular sheen (all devices)
   A slow diagonal light sweep across glass surfaces for life.
   ================================================================= */
@keyframes lgfx-sheen {
  0%   { background-position: -160% 0; opacity: 0; }
  18%  { opacity: 0.5; }
  40%  { background-position: 160% 0; opacity: 0; }
  100% { background-position: 160% 0; opacity: 0; }
}

/* Apply a periodic sheen to the big glass surfaces (chrome, panel, plan cards) */
.gc-chrome--pro::after,
.gc-game-sheet--sketch .gc-game-sheet__panel-head::after,
.plan-card--highlight::before {
  pointer-events: none;
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .lgfx-rim::before,
  [class*="gc-"]::after,
  .category-page--games .gc-platform-chip .gc-platform-chip__icon::before,
  .plan-card::after,
  .plan-card__cta::after {
    animation: none !important;
  }
}