/* ───────────────────────────────────────────────────────────
   cycle-house.css — additions to the cool-dusk bento:
   · #c-cycle   cycling / Strava panel (Trek Marlin 5) — 3 layouts
   · #c-house   Slytherin sorting panel
   · [data-house="slytherin"] site-wide deep-emerald palette (3 variants)
   · easter eggs (active only)  ·  in-context variation "lab"
   Loaded AFTER variants/grid.css so house vars win the cascade.
   ─────────────────────────────────────────────────────────── */

/* ═══ 1. SLYTHERIN PALETTE (site-wide, reversible) ═══════════ */
/* base == "Serpent" (variant 3). variants 1/2 override below.   */
:root[data-house="slytherin"] {
  --bg: #0d0f0c;
  --bg-2: #121510;
  --card: #141710;
  --card-2: #191d14;
  --card-hi: #1c2018;
  --ink: #dde5d5;
  --ink-2: #8a9878;
  --ink-3: #707862;
  --line: rgba(180, 200, 160, 0.09);
  --line-2: rgba(180, 200, 160, 0.17);
  --frame-stripe: rgba(180, 200, 160, 0.05);
  --contrast: #c8d0b8;          /* sage silver */
  --contrast-ink: #0e1008;
  --spark: #8c9e56;             /* sage olive */
  --spark-soft: color-mix(in srgb, var(--spark) 18%, transparent);
  --spark-2: #b0be98;           /* muted sage secondary */
  --spark-2-soft: color-mix(in srgb, var(--spark-2) 14%, transparent);
  --spark-3: #6e8040;
  --spark-3-soft: color-mix(in srgb, var(--spark-3) 16%, transparent);
  --wizard-gold: rgba(191, 170, 90, 0.65);
  --wizard-gold-hi: rgba(210, 188, 100, 0.90);
}
/* light + slytherin: hero-tag uses darkest spark for legibility at small size */
:root[data-theme="light"][data-house="slytherin"] .hero-tag { color: var(--spark-3); }

/* light + slytherin: keep emerald readable on pale silver */
:root[data-theme="light"][data-house="slytherin"] {
  --bg: #dce4d4;
  --bg-2: #d0dac8;
  --card: #eaf0e2;
  --card-2: #e4eada;
  --card-hi: #e0e8d8;
  --ink: #141a0e;
  --ink-2: #4c5c44;
  --ink-3: #687060;
  --line: rgba(20, 42, 14, 0.10);
  --line-2: rgba(20, 42, 14, 0.18);
  --frame-stripe: rgba(20, 42, 14, 0.06);
  --contrast: #141a0e;
  --contrast-ink: #eaf0e2;
  --spark: #4a6030;
  --spark-2: #607060;
  --spark-3: #384e22;
  --wizard-gold: rgba(142, 124, 48, 0.80);
  --wizard-gold-hi: rgba(122, 104, 28, 0.95);
}

/* a touch more bloom on the dark grain when sorted */
:root[data-house="slytherin"] body::before { opacity: 0.42; }

/* serpent-green selection */
:root[data-house="slytherin"] ::selection { background: var(--spark-soft); color: var(--ink); }

/* ── card border + ambient glow ── */
:root[data-house="slytherin"] .card {
  border-color: var(--wizard-gold);
  border-radius: 0;
  box-shadow: 0 8px 32px -14px color-mix(in srgb, var(--spark) 14%, transparent);
}
:root[data-house="slytherin"] .card.click:hover {
  border-color: var(--wizard-gold-hi);
  box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--spark) 24%, transparent);
}

/* ── masthead — emerald underline + mark accent ── */
:root[data-house="slytherin"] .masthead {
  border-bottom: 1px solid color-mix(in srgb, var(--spark) 22%, transparent);
}
:root[data-house="slytherin"] .masthead .mark b { color: var(--spark); }

/* ── card labels — silver secondary, number in spark ── */
:root[data-house="slytherin"] .label { color: var(--spark-2); }
:root[data-house="slytherin"] .label .n { color: var(--spark); }

/* ── more links — silver ── */
:root[data-house="slytherin"] .more { color: var(--spark-2); }
:root[data-house="slytherin"] .more:hover { color: var(--spark); }


/* ═══ 2. CYCLING PANEL  (#c-cycle) ══════════════════════════ */
#c-cycle { padding: 0; }

#c-cycle .cycle-media {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--card-2);
  background-image: repeating-linear-gradient(135deg, var(--frame-stripe) 0 8px, transparent 8px 16px);
  background-size: cover; background-position: center 42%; background-repeat: no-repeat;
}
#c-cycle .cycle-media.has-photo { filter: brightness(0.78) contrast(1.05) saturate(1.05); }
#c-cycle .cycle-ph {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
#c-cycle .cycle-ph span { font-size: 9.5px; color: color-mix(in srgb, var(--ink-3) 65%, transparent); }
#c-cycle .cycle-media.has-photo .cycle-ph { display: none; }

#c-cycle .cycle-inner {
  position: relative; z-index: 2; height: 100%;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
#c-cycle .cycle-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#c-cycle .cycle-bike {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--spark); white-space: nowrap;
}
#c-cycle .cycle-grid { display: flex; align-items: flex-end; gap: 26px; margin-top: auto; }
#c-cycle .cycle-num {
  font-family: var(--serif); font-size: clamp(46px, 5.6vw, 78px); line-height: 0.86;
  color: var(--ink); letter-spacing: -0.01em;
}
#c-cycle .cycle-num .sm { font-size: 0.42em; color: var(--ink-2); }
#c-cycle .cycle-unit {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 6px; white-space: nowrap;
}
#c-cycle .cycle-unit span { color: var(--ink-2); }
#c-cycle .cycle-4wk {
  padding-left: 22px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
}
#c-cycle .cycle-4wk:empty { display: none; }
#c-cycle .cycle-4wk .rk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
#c-cycle .cycle-4wk .rm { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 2px; }
#c-cycle .cycle-recent {
  flex: 1; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
#c-cycle .cycle-recent .rk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
#c-cycle .cycle-recent .rt {
  font-family: var(--serif); font-size: 20px; line-height: 1.08; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#c-cycle .cycle-recent .rm { font-family: var(--mono); font-size: 11px; color: var(--spark); margin-top: 2px; }
#c-cycle .cycle-spec {
  display: flex; flex-wrap: wrap; gap: 6px;
}
#c-cycle .cycle-spec .sp {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em; white-space: nowrap;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
#c-cycle .more {
  position: relative; z-index: 2; margin: 0; padding: 0 24px 18px;
}

/* gradient scrim so text reads over the photo (variant A) */
/* bottom half uses a fixed dark base so the scrim stays dark in light mode too */
#c-cycle .cycle-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 30%, transparent) 0%,
    transparent 30%, transparent 44%,
    color-mix(in srgb, #0c0d12 70%, transparent) 75%,
    color-mix(in srgb, #0c0d12 94%, transparent) 100%);
}

/* Photo is always dark-filtered; force light text regardless of light/dark theme */
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-num { color: #eceef5; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-num .sm { color: #9098b0; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-unit { color: #606880; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-unit span { color: #9098b0; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-4wk .rk { color: #606880; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-4wk .rm { color: #9098b0; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-recent .rk { color: #606880; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-recent .rt { color: #eceef5; }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-recent .rm { color: var(--spark); }
#c-cycle .cycle-media.has-photo ~ .cycle-inner .cycle-spec .sp {
  color: #9098b0; border-color: rgba(236,238,245,0.12);
}
#c-cycle .cycle-media.has-photo ~ .more { color: rgba(236,238,245,0.55); }

/* ── layout A · "Trailhead" (photo behind, stats over) — default ── */
/* (base rules above already produce this) */


/* ═══ 3. SLYTHERIN HOUSE PANEL (#c-house) ═══════════════════ */
#c-house {
  align-items: center; text-align: center; justify-content: flex-start;
  gap: 0; overflow: hidden; padding-top: 18px; padding-bottom: 18px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--spark-3) 22%, transparent), transparent 60%),
    var(--card);
}
#c-house .label { align-self: flex-start; }
#c-house .house-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--spark) 7%, transparent) 0 10px, transparent 10px 20px);
}
#c-house > *:not(.house-bg) { position: relative; z-index: 1; }

#c-house .house-crest { margin: 4px auto 0; width: 56px; height: 62px; }
#c-house .house-crest svg { width: 100%; height: 100%; display: block; }
#c-house .crest-ring { fill: none; stroke: var(--spark); stroke-width: 1.4; opacity: .8; }
#c-house .crest-snake { fill: none; stroke: var(--contrast); stroke-width: 3.2; stroke-linecap: round; }
#c-house .crest-tongue { stroke: var(--spark); stroke-width: 1.4; stroke-linecap: round; }
#c-house .house-crest { transition: transform .4s ease; }
#c-house.click:hover .house-crest { transform: translateY(-2px) rotate(-3deg); }

#c-house .house-name {
  font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); margin-top: 7px;
}
#c-house .house-words {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--spark); margin-top: 7px;
}
#c-house .house-hint {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--ink-3);
  margin-top: auto; padding-top: 8px;
}
:root[data-house="slytherin"] #c-house .house-hint::before { content: "✓ sorted · "; color: var(--spark); }
:root[data-house="slytherin"] #c-house {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--spark) 30%, transparent), transparent 62%),
    var(--card-hi);
  border-color: var(--line-2);
}

/* ═══ 4. MASTHEAD SORT BUTTON ═══════════════════════════════ */
.house-tg svg { width: 18px; height: 18px; display: block; }
:root[data-house="slytherin"] .house-tg { color: var(--spark); border-color: color-mix(in srgb, var(--spark) 55%, transparent); }
:root[data-house="slytherin"] .house-tg:hover { color: var(--ink); }

@keyframes house-tg-sort {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.22) rotate(10deg); }
  65%  { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}
.house-tg.sorting-anim { animation: house-tg-sort 0.44s cubic-bezier(.2,.8,.2,1) forwards; }
.house-tg.sorting-anim svg { pointer-events: none; }

/* ═══ 5. EASTER EGGS (only when sorted) ═════════════════════ */
/* (a) drifting green motes */
.motes { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; display: none; }
:root[data-house="slytherin"] .motes { display: block; }
.mote {
  position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--spark); opacity: 0; filter: blur(.3px);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--spark) 70%, transparent);
  animation: mote-rise linear infinite;
}
@keyframes mote-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .9; }
  88% { opacity: .7; }
  100% { transform: translateY(-104vh) translateX(var(--drift, 20px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .mote { animation: none; display: none; } }

/* (b) sorting flash overlay */
.sorting {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.sort-halo {
  position: fixed; left: 50%; top: 50%; pointer-events: none; z-index: 8998;
  border-radius: 50%; width: max(200vw, 200vh); aspect-ratio: 1;
  background: radial-gradient(circle, #07110d 75%, transparent 100%);
  filter: blur(48px);
  opacity: 0;
}
.sort-halo.run { animation: sort-halo-travel 2.4s ease forwards; }
@keyframes sort-halo-travel {
  0%   { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0.12); opacity: 0; }
  8%   { opacity: 0.55; }
  38%  { transform: translate(-50%,-50%) scale(0.35); opacity: 0.85; }
  54%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sort-halo.run { animation: none; opacity: 0; } }
.sorting.run { animation: sort-flash 2.4s ease forwards; }
.sort-crest {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  animation: sort-crest-travel 2.4s ease forwards;
}
.sort-crest svg {
  width: clamp(160px, 26vw, 220px); height: clamp(160px, 26vw, 220px);
  fill: #8c9e56;
  animation: sort-crest-enter 2.4s ease forwards;
}
@keyframes sort-crest-travel {
  0%   { transform: translate(var(--tx,0px), var(--ty,0px)); }
  38%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes sort-crest-enter {
  0%   { transform: scale(0.2); filter: blur(10px) drop-shadow(0 0 0px #8c9e5600); opacity: 0; }
  8%   { opacity: 1; }
  38%  { transform: scale(1.06); filter: blur(0) drop-shadow(0 0 44px #8c9e56cc); }
  54%  { transform: scale(1.0); filter: blur(0) drop-shadow(0 0 28px #8c9e5688); }
  72%  { transform: scale(1.04); opacity: 1; }
  82%  { transform: scale(1.1); filter: blur(5px) drop-shadow(0 0 60px #8c9e56); opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}
.sorting .sort-sub {
  font-family: var(--mono); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: #b9c4bd;
  animation: sort-sub-enter 2.4s ease forwards;
}
@keyframes sort-sub-enter {
  0%   { opacity: 0; }
  38%  { opacity: 0; }
  52%  { opacity: 1; }
  72%  { opacity: 1; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sort-flash { 0%{opacity:0} 8%{opacity:1} 72%{opacity:1} 100%{opacity:0} }
.sorting.run-out { animation: sort-flash-out 2.4s ease forwards; }
@keyframes sort-flash-out { 0%{opacity:1} 72%{opacity:1} 88%{opacity:0} 100%{opacity:0} }
.sorting.run-out .sort-crest { animation: sort-crest-travel-out 2.4s ease forwards; }
.sorting.run-out .sort-crest svg { animation: sort-crest-exit 2.4s ease forwards; }
.sorting.run-out .sort-sub { animation: sort-sub-exit 2.4s ease forwards; }
@keyframes sort-crest-travel-out {
  0%   { transform: translate(0,0); }
  26%  { transform: translate(0,0); }
  64%  { transform: translate(var(--tx,0px), var(--ty,0px)); }
  100% { transform: translate(var(--tx,0px), var(--ty,0px)); }
}
@keyframes sort-crest-exit {
  0%   { transform: scale(1.0); filter: blur(0) drop-shadow(0 0 28px #8c9e5688); opacity: 1; }
  14%  { transform: scale(1.06); filter: blur(0) drop-shadow(0 0 44px #8c9e56cc); opacity: 1; }
  26%  { transform: scale(1.0); filter: blur(0) drop-shadow(0 0 28px #8c9e5688); opacity: 1; }
  60%  { transform: scale(0.3); filter: blur(5px) drop-shadow(0 0 6px #8c9e5644); opacity: 0.8; }
  78%  { transform: scale(0.2); filter: blur(10px) drop-shadow(0 0 0px #8c9e5600); opacity: 0.2; }
  100% { transform: scale(0.2); filter: blur(10px) drop-shadow(0 0 0px #8c9e5600); opacity: 0; }
}
@keyframes sort-sub-exit {
  0%   { opacity: 1; }
  26%  { opacity: 1; }
  42%  { opacity: 0; }
  100% { opacity: 0; }
}
.sort-halo.out { animation: sort-halo-exit 2.4s ease forwards; }
@keyframes sort-halo-exit {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0; }
  8%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  30%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  46%  { transform: translate(-50%,-50%) scale(0.35); opacity: 0.85; }
  72%  { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0.12); opacity: 0.55; }
  92%  { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0.12); opacity: 0; }
  100% { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .sorting.run { animation: none; opacity: 0; } .sort-crest, .sort-crest svg { animation: none; }
  .sorting.run-out { animation: none; opacity: 0; } .sort-halo.out { animation: none; opacity: 0; } }

/* ripple from toggle button */
.sort-ripple {
  position: fixed; pointer-events: none; z-index: 8999; border-radius: 50%;
  width: max(220vw, 220vh); aspect-ratio: 1;
  background: radial-gradient(circle,
    transparent 0%,
    rgba(42,168,106,.06) 22%,
    rgba(42,168,106,.16) 40%,
    rgba(42,168,106,.06) 52%,
    transparent 68%);
  transform: translate(-50%,-50%) scale(0); opacity: 0;
}
.sort-ripple.run { animation: sort-rp .9s cubic-bezier(.12,0,.18,1) forwards; }
@keyframes sort-rp {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  8%   { opacity: .95; }
  72%  { opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
.sort-ripple.run-out { animation: sort-rp-out .9s cubic-bezier(.12,0,.18,1) forwards; }
@keyframes sort-rp-out {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0; }
  12%  { opacity: .8; }
  88%  { opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sort-ripple.run { animation: none; opacity: 0; }
  .sort-ripple.run-out { animation: none; opacity: 0; } }

/* (c) cursor tint when sorted */
:root[data-house="slytherin"] #cursor-ring { border-color: #c0d090; }

/* (d) Parseltongue line in the field-notes card */
.parseltongue {
  font-family: var(--serif); font-style: italic; color: var(--spark) !important;
}


/* modal stat blocks (cycle totals) */
.m-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin: 4px 0 8px;
}
.m-stat { background: var(--bg-2); padding: 16px 18px; }
.m-stat .ms-n { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--spark); }
.m-stat .ms-l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 7px;
}

/* ═══ 7. GRID PLACEMENT for the two new tiles ══════════════ */
/* (desktop + tablet placements live in grid.css; mobile heights here) */
@media (max-width: 620px) {
  #c-cycle { min-height: 330px; }
  #c-house { min-height: 232px; }
}