/* Halloway shared hunt chrome — auth gate modal, progress TOC, corner home hero,
   and per-hunt accent variables for The Veil / The Athanor / The Threshold.
   Loaded only by the hunt pages, after app.css.
   The shared hunt stylesheet for the TOC, corner home hero, and per-hunt
   accents used by the hunt engines (see docs/HUNT_AUTHORING.md): keep it
   self-contained beyond the shared .btn-primary / .btn-secondary base
   classes. */

body.veil-body {
  --easter-life-accent: #c4b5fd;
  --easter-life-warm: #f5d08a;
  --easter-life-rose: #e6a4b7;
}
body.athanor-body {
  --easter-life-accent: #e0a33c;
  --easter-life-warm: #ffe0a3;
  --easter-life-rose: #e77b65;
}
body.threshold-body {
  --easter-life-accent: #d99bb2;
  --easter-life-warm: #f2d8a8;
  --easter-life-rose: #f0abc2;
}
body.foyer-body {
  --easter-life-accent: #e8b34c;
  --easter-life-warm: #f4d18a;
  --easter-life-rose: #b14b6a;
}

.easter-live-word {
  --life-delay: 0ms;
  --life-accent: var(--easter-life-accent, #e8b34c);
  --life-warm: var(--easter-life-warm, #f4d18a);
  --life-rose: var(--easter-life-rose, #d99bb2);
  position: relative;
  display: inline-block;
  border-radius: 0.14em;
  color: inherit;
  text-decoration: inherit;
  transform-origin: 50% 74%;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, filter;
}
.easter-live-word::after {
  content: attr(data-easter-word);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  opacity: 0;
  text-decoration: inherit;
}
.easter-live-word--shimmer::after,
.easter-live-word--prism::after {
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 32%,
      color-mix(in srgb, var(--life-warm) 88%, white) 45%,
      var(--life-accent) 55%,
      transparent 70%,
      transparent 100%
    );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.easter-live-word--shimmer::after {
  animation: easter-word-shimmer 13s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--prism::after {
  background:
    linear-gradient(
      95deg,
      transparent 0%,
      var(--life-accent) 34%,
      var(--life-warm) 48%,
      var(--life-rose) 62%,
      transparent 100%
    );
  background-size: 260% 100%;
  animation: easter-word-prism 15s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--ember {
  animation: easter-word-ember 14s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--wiggle {
  animation: easter-word-wiggle 12s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--loop {
  animation: easter-word-loop 16s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--pulse {
  animation: easter-word-pulse 15s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--breathe {
  animation: easter-word-breathe 11s ease-in-out var(--life-delay) infinite;
}
.easter-live-word--sway {
  animation: easter-word-sway 13.5s ease-in-out var(--life-delay) infinite;
}
.easter-live-word.is-awake {
  animation: easter-word-awake 620ms cubic-bezier(0.18, 0.72, 0.25, 1) both !important;
}
.easter-live-word.is-awake::after {
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      color-mix(in srgb, var(--life-warm) 82%, white) 42%,
      var(--life-accent) 56%,
      transparent 100%
    );
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: easter-word-awake-glint 620ms ease-out both !important;
}

@keyframes easter-word-shimmer {
  0%, 78%, 100% { opacity: 0; background-position: 170% 50%; }
  82% { opacity: 0.72; }
  89% { opacity: 0; background-position: -70% 50%; }
}
@keyframes easter-word-prism {
  0%, 76%, 100% { opacity: 0; background-position: 180% 50%; }
  81% { opacity: 0.5; }
  88% { opacity: 0; background-position: -60% 50%; }
}
@keyframes easter-word-ember {
  0%, 80%, 100% {
    color: inherit;
    text-shadow: none;
  }
  84% {
    color: var(--life-warm);
    text-shadow: 0 0 0.55em color-mix(in srgb, var(--life-warm) 38%, transparent);
  }
  89% {
    color: var(--life-rose);
    text-shadow: 0 0 0.45em color-mix(in srgb, var(--life-rose) 32%, transparent);
  }
}
@keyframes easter-word-wiggle {
  0%, 81%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  83% { transform: translate3d(-0.035em, 0, 0) rotate(-1.6deg); }
  85% { transform: translate3d(0.04em, -0.01em, 0) rotate(1.3deg); }
  87% { transform: translate3d(-0.02em, 0, 0) rotate(-0.7deg); }
  89% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes easter-word-loop {
  0%, 79%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  82% { transform: translate3d(0.03em, -0.09em, 0) rotate(5deg); }
  85% { transform: translate3d(0.09em, -0.03em, 0) rotate(9deg); }
  88% { transform: translate3d(0.02em, 0.02em, 0) rotate(2deg); }
}
@keyframes easter-word-pulse {
  0%, 80%, 100% {
    transform: scale(1);
    text-shadow: none;
  }
  84% {
    transform: scale(1.025);
    text-shadow:
      0.012em 0 currentColor,
      0 0 0.48em color-mix(in srgb, var(--life-accent) 28%, transparent);
  }
  88% {
    transform: scale(1);
    text-shadow: none;
  }
}
@keyframes easter-word-breathe {
  0%, 77%, 100% {
    filter: brightness(1);
    text-shadow: none;
  }
  84% {
    filter: brightness(1.14);
    text-shadow: 0 0 0.52em color-mix(in srgb, var(--life-accent) 34%, transparent);
  }
}
@keyframes easter-word-sway {
  0%, 79%, 100% { transform: translateY(0) rotate(0deg); }
  83% { transform: translateY(-0.045em) rotate(-1.2deg); }
  88% { transform: translateY(0.012em) rotate(0.8deg); }
}
@keyframes easter-word-awake {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-0.055em) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes easter-word-awake-glint {
  0% { opacity: 0; background-position: 160% 50%; }
  35% { opacity: 0.85; }
  100% { opacity: 0; background-position: -70% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .easter-live-word,
  .easter-live-word::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
  .easter-live-word::after {
    opacity: 0 !important;
  }
}

/* Hidden hunt account gate + unlocked contents */
.easter-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(10px);
}
.easter-auth-modal[hidden] {
  display: none !important;
}
.easter-auth-card {
  width: min(100%, 24rem);
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #101824;
  color: var(--fg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.easter-auth-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.3rem;
  line-height: 1.15;
}
.easter-auth-card p {
  margin: 0;
  color: var(--fg-secondary);
  line-height: 1.45;
}
.easter-auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
body.easter-auth-open {
  overflow: hidden;
}
body.veil-body .easter-auth-card {
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(7, 8, 17, 0.98);
}
body.veil-body .easter-auth-actions .btn-primary {
  border: 1px solid rgba(167, 139, 250, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    #15111f;
  color: #f7f1ff;
}
body.veil-body .easter-auth-actions .btn-secondary {
  border-color: rgba(167, 139, 250, 0.42);
  color: #c7b4ff;
}
.easter-progress-toc {
  --easter-accent: var(--accent);
  --easter-panel: rgba(10, 15, 28, 0.36);
  --easter-line: rgba(255, 255, 255, 0.09);
  --easter-text: #f2f5ff;
  --easter-muted: rgba(242, 245, 255, 0.68);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  width: min(calc(100% - 2.5rem), 38rem);
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  padding: 0.7rem;
  border: 1px solid var(--easter-line);
  border-radius: 8px;
  background: var(--easter-panel);
  color: var(--easter-text);
  box-shadow: none;
}
body.veil-body .easter-progress-toc {
  --easter-accent: #a78bfa;
  --easter-panel: rgba(5, 6, 13, 0.38);
  --easter-line: rgba(167, 139, 250, 0.18);
  --easter-muted: rgba(232, 223, 255, 0.7);
}
body.athanor-body .easter-progress-toc {
  --easter-accent: #e0a33c;
  --easter-panel: rgba(10, 7, 4, 0.6);
  --easter-line: rgba(224, 163, 60, 0.2);
  --easter-text: #f3ead9;
  --easter-muted: rgba(243, 234, 217, 0.66);
}
.easter-toc-summary {
  min-width: 0;
  padding: 0 0.1rem;
}
.easter-toc-summary strong,
.easter-toc-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.easter-toc-summary strong {
  font-size: 0.92rem;
  line-height: 1.2;
}
.easter-toc-summary span {
  color: var(--easter-muted);
  font-size: 0.76rem;
}
.easter-toc-levels {
  display: grid;
  min-width: 0;
  border: 1px solid var(--easter-line);
  border-radius: 8px;
  overflow: hidden;
}
.easter-toc-level,
.easter-toc-lock,
.easter-toc-continue {
  min-height: 2.85rem;
  border-radius: 6px;
}
.easter-toc-level,
.easter-toc-lock {
  display: grid;
  grid-template-columns: minmax(4.8rem, auto) minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.58rem 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--easter-line);
  text-align: left;
}
.easter-toc-level:last-child,
.easter-toc-lock:last-child {
  border-bottom: 0;
}
.easter-toc-level {
  background: rgba(255, 255, 255, 0.02);
  color: var(--easter-text);
  font: inherit;
  cursor: pointer;
}
.easter-toc-level:hover,
.easter-toc-level:focus-visible {
  background: color-mix(in srgb, var(--easter-accent) 11%, transparent);
  outline: none;
}
.easter-toc-level.is-current {
  color: var(--easter-accent);
  background: color-mix(in srgb, var(--easter-accent) 7%, transparent);
}
.easter-toc-level.is-complete {
  color: var(--easter-text);
}
.easter-toc-level-label {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.easter-toc-level-title {
  min-width: 0;
  overflow: hidden;
  color: var(--easter-text);
  font-size: 0.84rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.easter-toc-lock {
  border-bottom-style: dashed;
  background: transparent;
  color: var(--easter-muted);
}
.easter-toc-lock .easter-toc-level-title {
  color: var(--easter-muted);
}
.easter-lock-icon {
  position: relative;
  width: 0.78rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.easter-lock-icon::before {
  content: "";
  position: absolute;
  left: 0.11rem;
  bottom: 0.5rem;
  width: 0.36rem;
  height: 0.36rem;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
.easter-toc-continue {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--easter-accent) 46%, var(--easter-line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--easter-accent) 18%, #080b12);
  color: var(--easter-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.24);
}
.easter-toc-continue:hover,
.easter-toc-continue:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--easter-accent) 25%, #080b12);
  outline: none;
}
body.has-easter-toc.veil-body .veil-root,
body.has-easter-toc.athanor-body .athanor-root {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* The "back to the homepage" hero. It floats in the top-left corner of
   every puzzle screen; tapping it returns to the hunt homepage, where the
   table of contents lives.

   The corner button's size + top inset + the clearance the puzzle needs below
   it are single-sourced here so the puzzle's top padding stays in lockstep
   with the button rather than repeating a magic number. */
:root {
  --easter-home-size: 3rem;
  --easter-home-inset: 0.6rem;
}
.easter-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(10, 15, 28, 0.55);
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
/* Floating corner variant (all three hidden hunts). */
.easter-home-link:not(.easter-home-link--inline) {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--easter-home-inset));
  left: calc(env(safe-area-inset-left, 0px) + var(--easter-home-inset));
  z-index: 60;
  width: var(--easter-home-size);
  height: var(--easter-home-size);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.easter-home-link:hover,
.easter-home-link:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.36);
}
.easter-home-hero {
  display: block;
  line-height: 0;
}
.easter-home-link:not(.easter-home-link--inline) .easter-home-hero,
.easter-home-link:not(.easter-home-link--inline) .easter-home-art {
  width: 100%;
  height: 100%;
}
.easter-home-art {
  display: block;
}
/* In-flow variant (unused today; kept for hunts that mount the hero in flow). */
.easter-home-link--inline {
  margin-bottom: 0.9rem;
  padding: 0.4rem 0.8rem 0.4rem 0.5rem;
}
.easter-home-link--inline .easter-home-hero,
.easter-home-link--inline .easter-home-art {
  width: 1.7rem;
  height: 1.7rem;
}
.easter-home-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* Per-hunt accents so the hero matches each world. */
body.veil-body .easter-home-link {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(5, 6, 13, 0.62);
}
body.athanor-body .easter-home-link {
  border-color: rgba(224, 163, 60, 0.32);
  background: rgba(10, 7, 4, 0.74);
  color: #e0a33c;
}
/* Make room at the top of a puzzle so the floating corner hero never
   covers the puzzle's eyebrow and title — derived from the button's inset +
   size (plus one more inset of clearance) so the two never drift apart. */
body.veil-body.easter-in-level .veil-root,
body.athanor-body.easter-in-level .athanor-root,
body.threshold-body.easter-in-level .thr-root {
  padding-top: calc(
    env(safe-area-inset-top, 0px) + var(--easter-home-inset) + var(--easter-home-size) +
      var(--easter-home-inset)
  );
}
@media (max-width: 430px) {
  .easter-auth-actions {
    display: grid;
  }
  .easter-auth-actions .btn-secondary,
  .easter-auth-actions .btn-primary {
    width: 100%;
  }
  .easter-progress-toc {
    width: min(calc(100% - 1rem), 38rem);
    gap: 0.55rem;
    padding: 0.65rem;
  }
  .easter-toc-level,
  .easter-toc-lock {
    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr) auto;
    padding-inline: 0.62rem;
  }
}