/* ===================== TUNE THESE ===================== */
.hype-hero {
  --hype-radius: 60px;       /* blob size */
  --hype-pad: 40px;          /* inside the hero: the pill and the copy sit this far in */
  --hype-score-inset: 40px;  /* the found counter, from the corner */
  --hype-accent: #e8b04b;    /* fossil card button + eyebrow colour (UX/Warning in the design system) */
  --hype-card-bg: #14100c;
  --hype-card-fg: #ffffff;
}
/* JS constants (wobble, speed, feather, spring, reveal threshold,
   fossil keep-out) sit at the top of src/fossil-hero.js.          */
/* The hero's inset, radius and type come from the design system tokens in
   dea-modules.css (--dea-gutter, --dea-radius-xl, --dea-type-hero), so it
   steps with the rest of the page. */
/* ====================================================== */

/* Page canvas the hero sits on. */
.hype-page { background: var(--dea-bg-page, #f9f7f2); }

/*
 * Scoped rather than a global reset, so dropping this into a WordPress page
 * cannot change the box model of anything outside the hero. Without it every
 * fixed width in here silently gains its padding: the nav pill comes out
 * wider than the 220 in the design.
 */
.hype-hero,
.hype-hero *,
.hype-hero *::before,
.hype-hero *::after { box-sizing: border-box; }

.hype-hero {
  position: relative;
  /*
   * Width must be explicit.
   *
   * With width:auto and an aspect-ratio, a definite height makes the browser
   * derive the WIDTH from the height instead of the other way round. The
   * width is one gutter in from each page edge, like every section below it.
   */
  width: calc(100% - (var(--dea-gutter) * 2));
  margin: var(--dea-gutter) var(--dea-gutter) 0;
  /*
   * Height from the design's proportions (1376 x 896 on desktop, 720 x 640
   * on tablet, 343 x 520 on a phone), never taller than the viewport less the
   * gutters, so nothing scrolls just to clear the hero.
   *
   * svh, not vh: on a phone 100vh is the height with the browser chrome
   * RETRACTED, so a vh-sized cap is taller than the visible area on load.
   * svh is the small viewport, the one that is always visible. The vh line
   * above it is the fallback for browsers without svh.
   */
  aspect-ratio: 1376 / 896;
  max-height: calc(100vh - (var(--dea-gutter) * 2));
  max-height: calc(100svh - (var(--dea-gutter) * 2));
  border-radius: var(--dea-radius-xl);
  overflow: hidden;
  isolation: isolate;
  background: #8a3f28;
  cursor: none; /* delete this line to keep the normal cursor */
}
.hype-hero__stage { position: absolute; inset: 0; z-index: 1; display: block; }

/*
 * A soft scrim under the headline, as the design's Hero / Feature carries,
 * so the white copy stays legible on any dirt. It paints over the two images
 * (same layer as the stage, later in the tree) and under everything
 * interactive, and never takes the pointer, so the dig is unaffected.
 */
.hype-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 10, 6, .42) 0%, rgba(20, 10, 6, .18) 32%, rgba(20, 10, 6, 0) 58%);
}

.hype-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- floating nav pill ---------- */
/* The design system's Site Header: 220 x 56, 24 padding, the logo at 124 x 40
   and the 24 menu glyph. Drawn here rather than by inc/site-chrome.php so it
   sits inside the hero's composition, but the same object. */
.hype-hero__nav {
  position: absolute; z-index: 4;
  top: var(--hype-pad); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 220px; height: 56px;
  padding: 0 24px;
  border-radius: var(--dea-radius-full, 999px);
  background: var(--dea-bg-card, #fff);
}
/*
 * These rules are deliberately over-specified.
 *
 * Elementor ships `.elementor img { height: auto }`, which is (0,1,1) and beats
 * a bare `.hype-fossil__img` (0,1,0). Inside an Elementor shortcode widget the
 * card image loses its fixed height and renders at its natural aspect - a 600px
 * square that swallows the whole hero. Prefixing with .hype-hero makes these
 * (0,2,0) so they win wherever this is embedded.
 */
.hype-hero .hype-hero__logo { display: block; width: 124px; height: 40px; object-fit: contain; }
/*
 * Neutralise the host theme's button styling inside the hero.
 *
 * hello-elementor's reset.css carries
 *   button:hover, button:focus { background-color: #cc3366; color: #fff }
 * which is (0,1,1) and beats a bare .hype-fossil__hit at (0,1,0). The result is
 * a pink block flashing under the cursor every time it crosses a buried fossil,
 * because the invisible hit area is a <button>. Prefixing with .hype-hero makes
 * these (0,2,1) so they win wherever this is embedded. Anything in here that
 * genuinely wants a background re-declares it below, at the same specificity.
 */
.hype-hero button,
.hype-hero button:hover,
.hype-hero button:focus,
.hype-hero button:active {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border: 0;
  text-decoration: none;
}

/* A 40 hit area around the 24 glyph, pulled back so the glyph sits 24 from
   the edge as designed. */
.hype-hero .hype-hero__menu {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--dea-action-dark, #111); cursor: pointer;
}
.hype-hero .hype-hero__menu svg { display: block; width: 24px; height: auto; }
.hype-hero .hype-hero__menu:hover { background-color: rgba(17, 17, 17, .07); }
.hype-hero .hype-hero__menu:focus-visible { outline: 3px solid var(--dea-action-dark, #111); outline-offset: 2px; }

/* ---------- fossils in the SVG ---------- */
.hype-fossil__svg {
  opacity: .88;
  transition: opacity .3s ease;
}
.hype-fossil__svg.is-found {
  opacity: 1;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.42));
  animation: hypeLift .7s cubic-bezier(.2,.9,.25,1);
}
/* the patch of surface that stays swept away once a fossil is found */
.hype-clear { animation: hypeSweep .6s cubic-bezier(.2,.9,.25,1) both; }
@keyframes hypeSweep {
  from { transform: scale(.3); }
  to   { transform: scale(1);  }
}

@keyframes hypeLift {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1);    }
}

/* ---------- headline ---------- */
/*
 * Under the pill, centred, per the design: the pill's inset, its 56 height and
 * the 40 gap below it. Absolutely positioned so the dig underneath is not
 * disturbed by the copy's box.
 */
.hype-hero__content {
  position: absolute; z-index: 2;
  top: calc(var(--hype-pad) + 56px + 40px); left: 50%; transform: translateX(-50%);
  width: calc(100% - (var(--hype-pad) * 2));
  max-width: 880px;
  text-align: center;
  color: var(--dea-text-inverse, #fff);
  pointer-events: none;
  /* The scrim carries the contrast now; this only lifts the letters off a
     busy patch of dirt. */
  text-shadow: 0 1px 18px rgba(60, 20, 8, .35);
}
.hype-hero__content h1 {
  margin: 0;
  /* Display on desktop, H1 on tablet, H3 on a phone, from the token. The hero
     sits outside .dea-mod, so the family comes with the token. */
  font: var(--dea-type-hero, 700 80px/88px Mulish, Inter, system-ui, sans-serif);
  letter-spacing: var(--dea-track-head, -.03em);
  /* Two even lines rather than a full one and a short one. A headline this
     size is read as a shape before it is read as a sentence. */
  text-wrap: balance;
}
.hype-hero__content p {
  margin: 16px auto 0;
  max-width: 560px;
  font: var(--dea-type-lede, 400 20px/32px Inter, system-ui, sans-serif);
}

/* The found counter: the design system's Tag (ink, sm) at 90%, one inset from
   the corner. Written out rather than via the .dea-tag classes until the
   hero's markup can carry them. */
.hype-hero__score {
  position: absolute; bottom: var(--hype-score-inset); right: var(--hype-score-inset); z-index: 4;
  /* Block, not flex: the counter is three text runs ("0", "of", "3 found")
     and a flex box would trim the spaces between them. */
  display: block;
  height: 32px; margin: 0; padding: 0 16px;
  border-radius: var(--dea-radius-full, 999px);
  background: var(--dea-action-dark, #111); color: #fff;
  font: var(--dea-type-label-sm, 700 12px/18px Inter, system-ui, sans-serif); line-height: 32px;
  letter-spacing: var(--dea-track-label, .1em); text-transform: uppercase; white-space: nowrap;
  opacity: .9;
  pointer-events: none;
}

/* ---------- hit area + card ---------- */
.hype-hero__fossils { position: absolute; inset: 0; z-index: 3; }
.hype-fossil { position: absolute; inset: 0; pointer-events: none; }

.hype-hero .hype-fossil__hit {
  position: absolute;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  pointer-events: none;      /* only clickable once found */
  border-radius: 12px;
}
.hype-hero .hype-fossil.is-found .hype-fossil__hit { pointer-events: auto; }
.hype-hero .hype-fossil__hit:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.hype-fossil__card {
  position: absolute;
  top: 0; z-index: 5;
  width: min(320px, 34%);
  background: var(--hype-card-bg);
  color: var(--hype-card-fg);
  border-radius: var(--dea-radius-md, 16px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s ease, transform .42s cubic-bezier(.2,.9,.25,1), visibility 0s .32s;
}
.hype-fossil[data-side="right"] .hype-fossil__card { transform: translateX(-16px) scale(.96); transform-origin: left center; }
.hype-fossil[data-side="left"]  .hype-fossil__card { transform: translateX(16px)  scale(.96); transform-origin: right center; }
.hype-fossil.is-open .hype-fossil__card {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: opacity .32s ease, transform .42s cubic-bezier(.2,.9,.25,1), visibility 0s;
}

.hype-hero .hype-fossil__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%;
  background-color: rgba(0,0,0,.5); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.hype-hero .hype-fossil__close:hover { background-color: rgba(0,0,0,.75); }

.hype-hero .hype-fossil__img { display: block; width: 100%; height: 152px; object-fit: cover; }
.hype-fossil__body { padding: 18px 20px 22px; }
.hype-fossil__eyebrow { margin: 0 0 6px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hype-accent); }
.hype-fossil__title { margin: 0 0 8px; font-family: Mulish, Inter, system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; }
.hype-fossil__text { margin: 0 0 16px; font-size: .9rem; line-height: 1.5; opacity: .8; }
.hype-fossil__btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--hype-accent); color: #14100c;
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.hype-fossil__btn:hover { filter: brightness(1.08); }

/* ---------- custom cursor ---------- */
.hype-hero__cursor {
  position: absolute; z-index: 6; top: 0; left: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 1.5px solid #fff;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.hype-hero.is-active .hype-hero__cursor { opacity: .9; }

/* ---------- touch / reduced motion: everything is already dug up ---------- */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hype-hero { cursor: auto; }
  .hype-hero__over { display: none; }
  .hype-hero__cursor { display: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .hype-hero { --hype-pad: 32px; --hype-score-inset: 20px; aspect-ratio: 720 / 640; }
  /* Elementor lays its container out as a column on tablet and phone and
     measures this widget before the hero's percentage width has resolved, so
     the hero came out with no height in the flow at 375. A floor in viewport
     units, still capped at the viewport, keeps it honest. */
  .hype-hero { min-height: min(calc((100vw - (var(--dea-gutter) * 2)) * 640 / 720), calc(100svh - (var(--dea-gutter) * 2))); }
  .hype-hero__content p { max-width: 480px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .hype-hero { --hype-pad: 24px; --hype-score-inset: 16px; aspect-ratio: 343 / 520; }
  .hype-hero { min-height: min(calc((100vw - (var(--dea-gutter) * 2)) * 520 / 343), calc(100svh - (var(--dea-gutter) * 2))); }
  .hype-hero__content p { max-width: none; }
  .hype-fossil__card,
  .hype-fossil[data-side="right"] .hype-fossil__card,
  .hype-fossil[data-side="left"]  .hype-fossil__card {
    left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; transform: translateY(18px);
  }
  .hype-fossil.is-open .hype-fossil__card { transform: translateY(0); }
  .hype-hero .hype-fossil__img { height: 118px; }
}