/* No Roar holding page: plain CSS, no build step. Mobile first. */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --muted: #8f8f8f;      /* AA on black (6.6:1) */
  --orange: #ff6a00;
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, figure { margin: 0; }
h1, h2 { font-weight: 400; }
.accent { color: var(--orange); }
::selection { background: var(--orange); color: var(--black); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- logo ---------- */
.logo { width: 100%; height: auto; color: var(--orange); overflow: visible; }

/* ---------- holding page ---------- */
.holding {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(1.75rem, 4.5vh, 2.5rem);
  padding: max(1.75rem, env(safe-area-inset-top)) var(--gutter) max(1.75rem, env(safe-area-inset-bottom));
  text-align: center;
  overflow: hidden;
}
/* a faint orange glow, low and quiet */
.holding::before {
  content: ""; position: absolute; inset: auto -20% -45% -20%; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,106,0,.10), transparent 70%);
  pointer-events: none;
}
.holding__brand { display: grid; justify-items: center; }
.holding__logo { width: clamp(80px, 22vw, 150px); }
.holding__statement {
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); letter-spacing: .03em; line-height: 1.02;
  max-width: 12em;
}
.holding__arrow {
  width: clamp(16px, .9rem + .6vw, 24px); height: auto; color: var(--orange);
  margin: clamp(.9rem, 2.2vh, 1.25rem) auto clamp(.6rem, 1.4vh, .85rem); overflow: visible;
}
.holding__site {
  font-size: clamp(.95rem, .8rem + .5vw, 1.35rem); letter-spacing: .28em; color: var(--white);
  text-transform: uppercase; padding-left: .28em; /* balance the trailing tracking */
}
.holding__art { position: relative; isolation: isolate; width: min(80vw, 44vh, 560px); }
/* brand-orange glow behind the skull: pulses once on arrival, then breathes slowly (opacity/transform only) */
.holding__art::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,106,0,.40), rgba(255,106,0,.15) 48%, rgba(255,106,0,0) 100%);
  opacity: .6;
}
/* static rim light to lift the white skull off the black (follows the transparent webp's outline) */
.holding__art img {
  width: 100%;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.28)) drop-shadow(0 0 22px rgba(255,106,0,.22));
}
.holding__drop { display: grid; justify-items: center; gap: 1rem; }

.drop__title {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.25rem);
  letter-spacing: .02em; line-height: .9; color: var(--white); white-space: nowrap;
}
.drop__slash, .drop__name { color: var(--orange); }
.drop__status {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid #333; padding: .55rem .8rem .5rem 1rem; line-height: 1;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-1px); }

.holding__social { display: grid; justify-items: center; gap: .55rem; }
.social__lead { font-size: clamp(.95rem, .85rem + .3vw, 1.1rem); letter-spacing: .32em; text-transform: uppercase; color: #a6a6a6; display: inline-flex; align-items: center; gap: .55em; }
.social__lead span { padding-left: .32em; }
.social__skull { width: 1.25em; height: 1.25em; color: var(--orange); flex: none; }
.social__link {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--white); text-decoration: none;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s ease;
}
.social__icon { width: .85em; height: .85em; flex: none; }
.social__link:hover, .social__link:focus-visible { color: var(--orange); }
.holding__back { font-size: 1.2rem; letter-spacing: .2em; text-decoration: none; }
.holding__back:hover { color: var(--white); }

/* desktop: words on the left, the skull large on the right */
@media (min-width: 900px) {
  .holding {
    grid-template-columns: auto auto; grid-template-areas: "brand art" "drop art" "social art";
    justify-content: center; align-content: center; align-items: center;
    column-gap: clamp(2rem, 4.5vw, 6rem); row-gap: clamp(2.5rem, 6vh, 3.75rem);
  }
  .holding__brand { grid-area: brand; align-self: end; }
  .holding__drop  { grid-area: drop; align-self: start; }
  .holding__social { grid-area: social; align-self: start; }
  .holding__art   { grid-area: art; width: min(44vw, 76vh, 660px); }
  .holding__logo  { width: clamp(110px, 10vw, 150px); }
}

/* motion: logo frame draws on, letters settle, slash strikes through, the skull pops in, the rest fades up.
   Off for reduced motion (everything static, glow shown at its resting level). */
@media (prefers-reduced-motion: no-preference) {
  .logo--hero .logo__frame { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) .15s forwards; }
  .logo--hero .logo__type  { opacity: 0; animation: fade 1s ease .9s forwards; }
  .logo--hero .logo__slash { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s cubic-bezier(.7,0,.3,1) 1.75s forwards; }
  /* the skull lands as the slash strikes through: punchy scale-in with a slight overshoot, glow flares then breathes */
  .holding__art { opacity: 0; transform: scale(.85); animation: pop .9s cubic-bezier(.2,.8,.25,1) 1.85s forwards; will-change: transform, opacity; }
  .holding__art::before {
    opacity: 0; transform: scale(.6);
    animation: glow-in 1.3s cubic-bezier(.2,.8,.25,1) 1.85s forwards, breathe 7s ease-in-out 3.15s infinite alternate;
  }
  .holding__statement, .holding__site, .holding__drop, .holding__social { opacity: 0; transform: translateY(10px); animation: rise 1s var(--ease) forwards; }
  .holding__statement { animation-delay: 2.35s; }
  .holding__arrow     { opacity: 0; animation: fade .01s linear 2.7s forwards; }
  .holding__arrow-shaft { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s var(--ease) 2.7s forwards; }
  .holding__arrow-head  { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .3s var(--ease) 3.2s forwards; }
  .holding__site      { animation-delay: 3.3s; }
  .holding__drop      { animation-delay: 3.45s; }
  .holding__social    { animation-delay: 3.7s; }
  .dot { animation: pulse 2.4s ease-in-out 3.8s infinite; }
}
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes fade  { to { opacity: 1; } }
@keyframes rise  { to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pop {
  0%   { opacity: 0; transform: scale(.85); }
  55%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glow-in {
  0%   { opacity: 0;  transform: scale(.6); }
  35%  { opacity: 1;  transform: scale(1.08); }
  100% { opacity: .6; transform: scale(1); }
}
@keyframes breathe {
  0%   { opacity: .6;  transform: scale(1); }
  100% { opacity: .38; transform: scale(.95); }
}