/* ============================================================
   MATERIALS — Yorker · glass & silver
   The premium material layer. Two materials, used sparingly:

   · GLASS — translucent, deeply blurred panels with a lit top
     edge. For overlays, floating chrome, nav, dialogs, menus.
   · SILVER — a brushed-metal gradient ink for hero moments:
     the flagship CTA, a wordmark, one number on a slide.

   Everything else stays matte charcoal. Restraint is the brand.
   ============================================================ */

:root {
  /* ---- Glass (dark) ---- */
  --glass-bg: rgba(24,24,28,.55);            /* @kind color */
  --glass-bg-strong: rgba(17,17,20,.74);     /* @kind color */
  --glass-border: rgba(255,255,255,.14);     /* @kind color */
  --glass-highlight: rgba(255,255,255,.20);  /* @kind color */  /* lit top edge */
  --glass-blur: 24px;                        /* @kind other */
  --glass-saturate: 160%;                    /* @kind other */

  /* ---- Silver metal ---- */
  --metal-silver: linear-gradient(180deg, #FFFFFF 0%, #EDEDF1 42%, #C7C8CF 55%, #F1F1F4 100%); /* @kind other */
  --metal-silver-deep: linear-gradient(165deg, #E2E3E8 0%, #9A9BA3 45%, #E8E8EC 58%, #B0B1B8 100%); /* @kind other */
  --metal-edge: rgba(255,255,255,.45);       /* @kind color */
  --metal-shadow: rgba(0,0,0,.35);           /* @kind color */
}

[data-theme="light"] {
  --glass-bg: rgba(255,255,255,.62);         /* @kind color */
  --glass-bg-strong: rgba(255,255,255,.82);  /* @kind color */
  --glass-border: rgba(0,0,0,.10);           /* @kind color */
  --glass-highlight: rgba(255,255,255,.85);  /* @kind color */
  --metal-edge: rgba(255,255,255,.75);       /* @kind color */
  --metal-shadow: rgba(0,0,0,.18);           /* @kind color */
}

/* ============ Material utilities ============ */

/* Frosted panel — compose with your own radius/padding. */
.yk-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lg);
}
.yk-glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-xl);
}

/* Brushed-silver ink — for display type and single hero figures. */
.yk-metal-text {
  background: var(--metal-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* On light surfaces the ink switches to the deeper silver so it keeps contrast. */
[data-theme="light"] .yk-metal-text {
  background-image: var(--metal-silver-deep);
}

/* Gentle hover lift — cards, tiles, anything clickable. */
.yk-lift {
  transition: transform var(--duration) var(--ease-emphasized),
              box-shadow var(--duration) var(--ease-emphasized),
              border-color var(--duration) var(--ease-emphasized);
}
.yk-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.yk-lift:active { transform: translateY(0) scale(.99); }

/* One slow light sweep across a surface (specular pass). */
@keyframes yk-sheen {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.yk-sheen {
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: yk-sheen 3.2s var(--ease-in-out) infinite;
}

/* Entrance choreography — overlays and popovers. */
@keyframes yk-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes yk-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .yk-sheen { animation: none; }
  .yk-lift, .yk-lift:hover, .yk-lift:active { transition: none; transform: none; }
}