/* Ecoflix hub design tokens, web and embed.
   Every value is the live ecoflix.com website's own (assets/site.css and /watch, origin/main 10 Oct 2026).
   The hub's screens read these; no screen types a colour, size or radius of its own. EF354, #134. */

:root{
  /* ground and surfaces (site.css) */
  --ink:#040506;
  --ink-80:#0a0c11;
  --ink-60:#11141b;
  --ink-40:#1a1d27;
  --navy:#020718;                 /* card wash on /watch: rgba(2,7,24,.55) */
  --card:rgba(2,7,24,.55);
  --card-solid:#0a1226;           /* poster well on /watch */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-leaf:rgba(168,243,65,.22);

  /* type colour */
  --bone:#f5f3ee;
  --mist:#b9bcc7;
  --mist-2:#6f7689;

  /* accents */
  --leaf:#A8F341;
  --leaf-hover:#B9F764;
  --leaf-deep:#6CB822;
  --leaf-glow:rgba(168,243,65,.35);
  --leaf-shine:#D3FA9E;
  --sun:#f0c25f;
  --coral:#e26a5b;                /* live and urgent only */

  /* type */
  --display:'Red Hat Display', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;

  /* radii */
  --r-sm:8px; --r-md:14px; --r-card:18px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* spacing */
  --pad-x:clamp(24px,5vw,80px);
  --pad-section:clamp(64px,11vh,160px);
  --header-h:78px;

  /* player */
  --scrim-top:linear-gradient(180deg,rgba(4,5,6,.78) 0%,rgba(4,5,6,0) 100%);
  --scrim-foot:linear-gradient(0deg,rgba(4,5,6,.86) 0%,rgba(4,5,6,0) 100%);
  --hero-fade-left:linear-gradient(90deg,var(--ink) 0%,rgba(4,5,6,.92) 30%,rgba(4,5,6,.35) 62%,rgba(4,5,6,0) 100%);
  --hero-fade-foot:linear-gradient(0deg,var(--ink) 0%,rgba(4,5,6,0) 42%);

  /* motion (site.css transitions, 12 Oct 2026) */
  --ease-out:cubic-bezier(.22,.9,.3,1);    /* lifts, arrows, buttons, modals */
  --ease-glide:cubic-bezier(.2,.7,.1,1);   /* image zoom inside a tile, reveals, panels */
  --ease-spring:cubic-bezier(.2,.7,.1,1.2);/* tile lift on /watch (.wtile, .btile) */
  --ease-in-out:cubic-bezier(.7,0,.2,1);   /* drawer, hero crossfade */
  --dur-instant:.15s;                      /* menu and share items */
  --dur-quick:.2s;                         /* colour and background on buttons and links */
  --dur-base:.25s;                         /* card hover, link underline, focus ring */
  --dur-lift:.35s;                         /* card lift with --ease-out, modal in */
  --dur-tile:.5s;                          /* /watch tile lift with --ease-spring; shadow .4s */
  --dur-reveal:.8s;                        /* scroll reveal, opacity and transform together */
  --dur-image:1s;                          /* image zoom on hover with --ease-glide; filter .5s */
  --dur-pulse:2.4s;                        /* live and eyebrow dot, ease-out, infinite */
}

/* phones: the site's own override (site.css, max-width 560px); the header CTA shrinks at this width */
@media (max-width:560px){
  :root{--pad-x:28px;--pad-section:72px;--header-h:66px}
}

/* reduced motion: the site turns every animation and transition off; the hub does the same */
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0s;--dur-quick:0s;--dur-base:0s;--dur-lift:0s;--dur-tile:0s;--dur-reveal:0s;--dur-image:0s}
  .hub-eyebrow::before{animation:none}
}

/* --------------------------------------------------------------------------
   Components. Every class below begins `hub-`, so this file is safe to link
   beside assets/site.css: a page opts a single element in by naming the hub
   class on it (`class="hub-btn hub-btn-play"`), and the site's own .btn,
   .eyebrow, .coord and .badge are untouched on the rest of the page. The
   :root block above is shared and needs no opt-in. Prefix anything added
   here; assets/hub-player.css uses `hubp-` for the same reason. (#160)
   -------------------------------------------------------------------------- */

/* the headline: white display bold, then the lime italic second half, with a full stop */
.hub-h-display{font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:.96;color:var(--bone)}
.hub-h-display em,.hub-h-sect em{font-style:italic;font-weight:500;color:var(--leaf)}
.hub-h-sect{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--bone)}

/* eyebrow: leaf dot, tracked capitals */
.hub-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.hub-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 6px rgba(168,243,65,.14)}

/* coordinate stamp */
.hub-coord{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-2);font-feature-settings:"tnum"}
.hub-coord::before{content:"⊕";color:var(--leaf);font-size:12px}

/* buttons: pill, display face (/watch) */
.hub-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.04em;padding:17px 28px;border-radius:var(--r-pill);border:0;text-decoration:none;white-space:nowrap}
.hub-btn-play{background:var(--leaf);color:var(--navy)}
.hub-btn-ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hub-btn-give{background:rgba(168,243,65,.10);color:var(--leaf);box-shadow:inset 0 0 0 1px rgba(168,243,65,.45)}
.hub-btn .hub-ic{width:16px;height:16px;display:inline-block}

/* chips and badges */
.hub-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);background:rgba(2,7,24,.7);border:1px solid var(--line-leaf);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--bone)}
.hub-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);background:rgba(168,243,65,.18);border:1px solid var(--leaf);color:var(--leaf);font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.hub-runtime{padding:4px 9px;border-radius:6px;background:rgba(2,7,24,.78);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--bone)}

/* title tile, 16:9 */
.hub-tile{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.hub-tile-art{position:relative;aspect-ratio:16/9;background:var(--card-solid) center/cover no-repeat}
/* the five-second preview (#136). Laid over the art well, BEHIND the badge and
   the runtime, so a clip never covers the one piece of text on the still. It
   is created by assets/hub-previews.js only for a tile whose record carries a
   clip and only once a gesture has lasted its delay, so this rule applies to
   nothing on a page that has no clips. z-index 0 and not auto: the badge and
   the runtime are positioned without one, and a positioned element later in
   the markup would otherwise paint over them. */
.hub-tile-art>.hub-preview{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block;border:0;background:transparent;pointer-events:none}
.hub-tile-art>.hub-preview[hidden]{display:none}
.hub-tile-art .hub-badge{position:absolute;top:12px;left:12px;z-index:1}
.hub-tile-art .hub-runtime{position:absolute;bottom:12px;right:12px;z-index:1}
.hub-tile-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.hub-tile-body h3{margin:0;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;line-height:1.2;color:var(--bone)}
.hub-tile-body p{margin:0;font-family:var(--body);font-size:13px;line-height:1.5;color:var(--mist)}
.hub-tile-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.hub-tile-progress i{display:block;height:100%;background:var(--leaf)}

/* focus, shared by web keyboard focus and the television */
.hub-is-focus{outline:3px solid var(--leaf);outline-offset:4px;box-shadow:0 0 0 10px rgba(168,243,65,.12),0 24px 60px rgba(0,0,0,.6)}

/* kind label (series, episode) sits in the tile body, never on the artwork */
.hub-kind{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}