/* Breaking News – Halloween nieuwsspel (Studio GraveVis)
   Alles is gescoped onder #hng zodat het ook in een Webflow-pagina kan draaien.
   --u = 1 designpixel (Figma-frame 1440×982), schaalt mee met het venster. */

#hng {
  --green: #88bd2f;
  --orange: #eb5518;
  --ink: #021202;
  --white: #fff;
  --u: calc(min(100vw, 146.64vh) / 1440);
  --f-drip: 'Creepster', 'Chiller', fantasy;
  --f-sans: 'Bricolage Grotesque', system-ui, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #050805;
  color: var(--white);
  font-family: var(--f-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#hng *, #hng *::before, #hng *::after { box-sizing: border-box; }
/* lage specificiteit: de .hng-klassen hieronder winnen altijd, Webflow-defaults niet */
:where(#hng) :is(h1, h2, h3, p, ul, ol, li, button, figure) { margin: 0; padding: 0; }
:where(#hng) img { display: block; max-width: 100%; }
:where(#hng) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Lagen ---------- */
.hng-bg {
  position: absolute; inset: 0;
  background: url(../assets/bg.jpg) 0 0 / cover no-repeat;
}
.hng-bg::after { /* zachte vignet zodat tekst leesbaar blijft */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .45) 100%);
}
.hng-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hng-smoke, .hng-bats { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hng-bats { z-index: 5; }
.hng-logo { position: absolute; right: calc(12 * var(--u) + 8px); bottom: calc(12 * var(--u) + 8px); z-index: 6; width: 28px; opacity: .9; }
.hng-logo img { width: 100%; }

/* ---------- Schermen ---------- */
.hng-screen {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.hng-screen.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease .15s, visibility 0s; }

/* ---------- Typografie ---------- */
.hng-drip {
  font-family: var(--f-drip); font-weight: 400; line-height: 1;
  color: var(--green); filter: url(#hng-ink-green);
  text-transform: uppercase; letter-spacing: .01em;
}
.hng-kicker {
  position: absolute; left: 0; right: 0; top: calc(46 * var(--u));
  font-family: var(--f-drip); font-size: max(24px, calc(36 * var(--u)));
  color: var(--orange); filter: url(#hng-ink-orange); text-transform: uppercase; text-align: center;
}
.hng-lead { font-size: max(19px, calc(36.4 * var(--u))); line-height: 1.2; text-align: center; }
.hng-lead--sm { font-size: max(17px, calc(24 * var(--u))); }
.hng-label { font-weight: 700; font-size: max(13px, calc(18 * var(--u))); letter-spacing: .08em; text-transform: uppercase; text-align: center; }

/* ---------- Knop ---------- */
.hng-btn {
  position: relative; display: inline-block;
  padding: calc(20 * var(--u)) calc(40 * var(--u));
  min-height: 48px;
  border-radius: 8px;
  background: var(--green);
  box-shadow: inset 0 10px 10px rgba(252, 255, 89, .5), inset 0 -7px 7px rgba(23, 88, 94, .5), 0 3px 4px rgba(0, 0, 0, .25);
  font-family: var(--f-drip); font-size: max(34px, calc(60.5 * var(--u))); line-height: 1;
  color: var(--ink) !important; text-transform: uppercase;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), filter .2s;
}
.hng-btn:hover { transform: translateY(-3px) rotate(-1.5deg); filter: brightness(1.08); }
.hng-btn:active { transform: translateY(1px) scale(.97); }
.hng-btn:focus-visible, .hng-pumpkin:focus-visible, .hng-share__btn:focus-visible, .hng-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.hng-btn--small { font-size: max(26px, calc(36 * var(--u))); padding: 14px 28px; }
.hng-link { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; opacity: .8; }
.hng-link:hover { opacity: 1; }

/* ---------- 1. Start ---------- */
.hng-start__body {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(11 * var(--u));
  width: max-content; max-width: calc(100% - 32px);
}
.hng-start__title { font-size: max(84px, calc(140 * var(--u))); }
.hng-start .hng-btn { position: absolute; left: 50%; top: calc(800 * var(--u) + (100vh - 982 * var(--u)) / 2); transform: translateX(-50%); }
.hng-start .hng-btn:hover { transform: translateX(-50%) translateY(-3px) rotate(-1.5deg); }
.hng-start .hng-btn:active { transform: translateX(-50%) scale(.97); }

/* ---------- 2. Game ---------- */
.hng-word-wrap {
  position: absolute; left: 16px; right: 16px; top: 47%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.hng-word { font-size: calc(146 * var(--u)); text-align: center; white-space: nowrap; transition: opacity .25s ease; }
.hng-word.is-hidden { opacity: 0; transition-duration: .12s; }
.hng-word.is-pop { animation: hng-word-bounce .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hng-word-bounce {
  0% { transform: scale(.88); }
  45% { transform: scale(1.1); }
  70% { transform: scale(.97); }
  100% { transform: scale(1); }
}
.hng-plus {
  position: absolute; left: 0; top: 0; z-index: 1; white-space: nowrap; pointer-events: none;
  font-family: var(--f-drip); font-size: max(24px, calc(36 * var(--u))); color: var(--orange);
  filter: url(#hng-ink-orange); text-transform: uppercase;
  transform: rotate(-8deg); opacity: 0;
}
/* van onderen infaden (.4s), 2s blijven staan, naar boven uitfaden (.5s) */
.hng-plus.is-pop { animation: hng-plus 2.9s ease-out forwards; }
@keyframes hng-plus {
  0% { opacity: 0; transform: rotate(-8deg) translateY(28px); }
  14% { opacity: 1; transform: rotate(-8deg) translateY(0); }
  83% { opacity: 1; transform: rotate(-8deg) translateY(0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: rotate(-8deg) translateY(-28px); }
}

/* Meter: blok van x85 → x1287, y741 → y925 in het Figma-frame */
.hng-meter {
  --m: var(--u);
  position: absolute;
  left: calc(50% - 635 * var(--m));
  bottom: calc(57 * var(--m) + (100vh - 982 * var(--u)) / 2);
  width: calc(1202 * var(--m)); height: calc(184 * var(--m));
}
.hng-meter__label {
  position: absolute; left: calc(104 * var(--m)); right: 0; top: calc(9 * var(--m));
  text-align: center; font-weight: 400; font-size: max(13px, calc(20 * var(--m))); letter-spacing: .08em; text-transform: uppercase;
}
.hng-meter__track {
  position: absolute; left: calc(104 * var(--m)); top: calc(68 * var(--m));
  width: calc(1098 * var(--m)); height: calc(71 * var(--m));
  border: 1px solid var(--green); border-radius: 999px;
  background: rgba(0, 0, 0, .45); overflow: hidden;
}
.hng-meter__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--green);
  box-shadow: inset 3.5px 0 16px rgba(252, 255, 89, .5), inset -3.5px 0 16px rgba(23, 88, 94, .5), inset 0 3px 3px rgba(252, 255, 89, .6), inset 0 -3px 3px rgba(23, 88, 94, .6), 0 7px 21px rgba(0, 0, 0, .25);
  transition: width .9s cubic-bezier(.3, 1.3, .5, 1);
}
.hng-meter__shine {
  position: absolute; left: calc(41 * var(--m)); right: calc(22 * var(--m)); top: 50%;
  height: calc(20 * var(--m)); margin-top: calc(-14 * var(--m)); border-radius: 99px;
  background: rgba(255, 255, 255, .25);
}
/* Counter-Line (Figma 2029:322): witte lijn met doodskop; svg is 62×124 incl. schaduwmarge */
.hng-meter__marker {
  position: absolute; top: calc(46 * var(--m)); left: calc(104 * var(--m));
  width: calc(62 * var(--m)); height: calc(124 * var(--m)); margin-left: calc(-31 * var(--m));
  background: url(../assets/counter-line.svg) center / 100% 100% no-repeat;
  transition: left .9s cubic-bezier(.3, 1.3, .5, 1);
}
.hng-meter__marker.is-bump { animation: hng-skull .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hng-skull { 40% { transform: scale(1.15) rotate(-8deg); } }
.hng-meter__pct {
  position: absolute; top: calc(70 * var(--m)); left: calc(130 * var(--m));
  font-family: var(--f-drip); font-size: max(26px, calc(50 * var(--m))); line-height: 1.3; color: var(--green); filter: url(#hng-ink-green);
  transition: left .9s cubic-bezier(.3, 1.3, .5, 1);
}
.hng-meter__marker, .hng-meter__pct { transition-property: left, opacity; }
.hng-meter.is-empty .hng-meter__marker, .hng-meter.is-empty .hng-meter__pct { opacity: 0; }
.hng-meter__pct.is-right { transform: translateX(calc(-100% - 93 * var(--m))); color: var(--ink); filter: none; }

.hng-pumpkin {
  position: absolute; left: 0; top: 0; width: calc(177 * var(--m)); height: calc(184 * var(--m));
  filter: drop-shadow(0 0 calc(40 * var(--m)) rgba(255, 179, 86, .55));
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), filter .25s;
}
.hng-pumpkin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.hng-pumpkin__on, .hng-breathe__pumpkin .hng-pumpkin__on { opacity: 0; }
/* gloeiende pompoen alleen bij hover (en toetsenbordfocus), niet bij aantikken op touch */
@media (hover: hover) {
  .hng-pumpkin:hover { transform: scale(1.06) rotate(-3deg); filter: drop-shadow(0 0 calc(70 * var(--m)) rgba(255, 179, 86, .85)); }
  .hng-pumpkin:hover .hng-pumpkin__on { opacity: 1; }
}
.hng-pumpkin:focus-visible { transform: scale(1.06) rotate(-3deg); }
.hng-pumpkin:focus-visible .hng-pumpkin__on { opacity: 1; }
.hng-pumpkin.is-hit { animation: hng-squash .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hng-squash {
  0% { transform: scale(1.06); }
  25% { transform: scale(1.18, .86) translateY(6%); }
  55% { transform: scale(.94, 1.1) translateY(-4%); }
  100% { transform: scale(1.06) rotate(-3deg); }
}
.hng-pumpkin.is-wiggle { animation: hng-wiggle 1.4s ease-in-out infinite; }
@keyframes hng-wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  68% { transform: rotate(-9deg) scale(1.05); }
  76% { transform: rotate(7deg) scale(1.05); }
  84% { transform: rotate(-5deg); }
  92% { transform: rotate(3deg); }
}

.hng-nudge {
  position: absolute; left: calc(150 * var(--m)); bottom: calc(150 * var(--m));
  display: flex; align-items: flex-end; gap: 2px; color: var(--orange);
  font-family: var(--f-drip); font-size: max(26px, calc(40 * var(--m))); text-transform: uppercase; filter: url(#hng-ink-orange);
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; pointer-events: none;
}
.hng-nudge span { order: 2; transform: rotate(-8deg) translateY(-30px); white-space: nowrap; }
.hng-nudge svg { order: 1; width: max(54px, calc(80 * var(--m))); height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.hng-nudge.is-on { opacity: 1; transform: none; animation: hng-bob 1.1s ease-in-out infinite; }
@keyframes hng-bob { 50% { transform: translate(-6px, 6px); } }

/* ---------- 3. Resultaat (Figma "Eindscherm V2 (rust)" 2032:2) ---------- */
.hng-result { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* achtergrond wordt wazig op het eindscherm */
.hng-bg { transition: filter 1.2s ease, transform 1.2s ease; }
#hng[data-screen='result'] .hng-bg { filter: blur(32px) brightness(.9); transform: scale(1.12); }

/* ademhalingsvak en tips even breed (= natuurlijke breedte van de tips) */
.hng-result { --hng-panel: min(680px, 100%); }
.hng-result__inner {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(30 * var(--u));
  padding: calc(28 * var(--u) + 12px) 16px calc(16 * var(--u) + 12px);
}
/* "Opnieuw beginnen" linksboven, in light, zonder onderlijning */
.hng-result__inner { position: relative; }
.hng-result .hng-link { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-weight: 300; text-decoration: none; }
.hng-link__arrow { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.hng-link:hover .hng-link__arrow { transform: translateX(-3px); }
.hng-result__intro { font-size: max(24px, calc(36 * var(--u))); line-height: 1.2; text-align: center; }

.hng-calm {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: var(--hng-panel);
  padding: calc(40 * var(--u)) 24px calc(48 * var(--u));
  border-radius: 16px; background: rgba(0, 0, 0, .55);
  text-align: center;
}
.hng-calm__kicker { font-size: 14px; line-height: 1.4; text-transform: uppercase; color: var(--white); }
.hng-calm__title { font-size: 44px; line-height: 1.2; filter: url(#hng-ink-green-sm); }
.hng-calm__text { font-size: 20px; line-height: 1.4; }

.hng-breathe {
  position: relative; display: grid; place-items: center;
  width: clamp(190px, calc(240 * var(--u) + 20px), 240px); aspect-ratio: 1; margin-top: calc(20 * var(--u));
}
.hng-breathe::before { content: ''; position: absolute; inset: 0; border: 2px dashed rgba(136, 189, 47, .5); border-radius: 50%; background: rgba(255, 255, 255, .08); }
.hng-breathe__ghost {
  width: 47%; height: auto;
  transform-origin: 50% 60%; will-change: transform;
}
.hng-breathe__cue {
  position: absolute; left: 0; right: 0; bottom: 7%;
  font-size: 22px; line-height: 1; filter: url(#hng-ink-green-sm);
  opacity: 0; transition: opacity .4s;
}
.hng-breathe:not([data-phase='idle']) .hng-breathe__cue { opacity: 1; }
.hng-breathe[data-phase='in']::before { animation: hng-spin 16s linear infinite; }
@keyframes hng-spin { to { transform: rotate(360deg); } }

/* fade-ins: het eindscherm bouwt zich rustig op */
.hng-result__inner > *, .hng-calm > * { opacity: 0; }
.hng-result.is-active .hng-result__inner > *,
.hng-result.is-active .hng-calm > * { animation: hng-fade-up .8s cubic-bezier(.2, .8, .3, 1) both; }
.hng-result.is-active .hng-result__intro { animation-delay: .35s; }
.hng-result.is-active .hng-calm { animation-delay: .6s; }
.hng-result.is-active .hng-calm > :nth-child(1) { animation-delay: .8s; }
.hng-result.is-active .hng-calm > :nth-child(2) { animation-delay: .9s; }
.hng-result.is-active .hng-calm > :nth-child(3) { animation-delay: 1s; }
.hng-result.is-active .hng-calm > :nth-child(4) { animation: hng-fade-scale 1s cubic-bezier(.2, .8, .3, 1) 1.15s both; }
.hng-result.is-active .hng-calm > :nth-child(5) { animation-delay: 1.35s; }
.hng-result.is-active .hng-tips { animation-delay: 1.5s; }
.hng-result.is-active .hng-result__inner > .hng-link { animation-delay: 1.7s; }
@keyframes hng-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hng-fade-scale { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* hangende pompoenen: touw op canvas, pompoen als img die JS positioneert */
.hng-hang { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s ease .2s; }
.hng-result.is-active .hng-hang { opacity: 1; }
.hng-hang__ropes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hng-hang__pumpkin {
  position: absolute; left: 0; top: 0; max-width: none;
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 0 30px rgba(255, 179, 86, .35));
  will-change: transform;
}
.hng-hang__pumpkin.is-grabbed { cursor: grabbing; filter: drop-shadow(0 0 50px rgba(255, 179, 86, .6)); }

/* tips: één tegelijk, met pijltjes */
.hng-tips {
  display: flex; align-items: flex-start; justify-content: center; gap: 40px;
  width: var(--hng-panel); padding: 20px 40px;
  border: 1px dashed rgba(136, 189, 47, .5); border-radius: 16px;
}
.hng-tips__title { font-size: 32px; line-height: 1.2; filter: url(#hng-ink-green-sm); white-space: nowrap; }
.hng-tips__body { display: flex; align-items: center; gap: 12px; }
.hng-tips__list { list-style: none; display: grid; width: 284px; font-size: 16px; line-height: 1.4; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hng-tips__list li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(12px); transition: opacity .3s, transform .3s, visibility 0s .3s; }
.hng-tips__list li.is-active { opacity: 1; visibility: inherit; /* inherit: blijft verborgen (en onklikbaar) zolang het eindscherm verborgen is */ transform: none; transition: opacity .3s, transform .3s; }
.hng-tips__list strong { display: block; font-weight: 800; color: var(--green); }
.hng-tips__nav { display: flex; gap: 12px; }
.hng-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
  background: var(--green) !important;
  box-shadow: inset 0 4px 4px rgba(252, 255, 89, .5), inset 0 -4px 4px rgba(23, 88, 94, .5), 0 3px 4px rgba(0, 0, 0, .25);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), filter .2s;
}
.hng-arrow img { width: 24px; height: 24px; }
.hng-arrow--prev img { transform: scaleX(-1); }
.hng-arrow:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hng-arrow:active { transform: scale(.94); }
.hng-arrow:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (max-width: 760px) {
  .hng-result__intro br, .hng-calm__text br { display: none; }
  /* inhoud zakt tot ongeveer halverwege; erboven hangt één pompoen */
  .hng-result__inner { padding-top: calc(50vh - 50px); }
  .hng-result__intro { max-width: 26ch; font-size: 18px; line-height: 1.4; }
  .hng-result .hng-link { left: 0; right: 0; width: max-content; margin-inline: auto; }
  .hng-calm__title { font-size: 36px; }
  .hng-calm__text { font-size: 18px; max-width: 22ch; }
  .hng-tips { flex-direction: column; gap: 14px; padding: 20px; width: 100%; }
  .hng-tips__title br { display: none; }
  .hng-tips__title { font-size: 28px; white-space: normal; }
  .hng-tips__body { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; }
  .hng-tips__list { width: auto; }
  .hng-tips__nav { justify-content: center; }
}

/* staande tablets: geen plek naast de inhoud, dus ook één pompoen erboven */
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {
  .hng-result__inner { padding-top: calc(50vh - 50px); }
  .hng-result .hng-link { left: 0; right: 0; width: max-content; margin-inline: auto; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hng-bg { background-image: url(../assets/bg-sm.jpg); background-position: 70% 0; }
  .hng-kicker { top: max(24px, env(safe-area-inset-top)); }
  .hng-start .hng-btn { top: calc(50% + 120px); }
  /* woord precies in het midden tussen bovenrand en bovenkant van de meter */
  .hng-word-wrap {
    top: 0; transform: none; justify-content: center;
    bottom: calc(max(32px, calc(env(safe-area-inset-bottom) + 20px)) + 184 * min(100vw - 24px, 560px) / 1202 * 1.9);
  }
  .hng-meter {
    --m: calc(min(100vw - 24px, 560px) / 1202 * 1.9);
    left: 12px; right: 12px; width: auto; margin: 0 auto; max-width: 560px;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .hng-meter__track { right: 0; width: auto; }
  .hng-meter__label { left: 0; padding-left: calc(104 * var(--m)); }
  .hng-nudge { left: calc(130 * var(--m)); }
  .hng-logo { right: 10px; bottom: 6px; width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #hng *, #hng *::before, #hng *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hng-breathe[data-phase]::before { animation: none !important; }
}