/* landing/hero.css — the opening of the landing page: the intro cover, the notebook paper,
   the hero (film, Claim form sizing, Discord note, phone profile fan) and the marquee strip.
   Generic components used here (.claim, .hint, .lede, .container, tokens) are base.css's;
   this file only sizes them for the hero. Effective values were computed from the old cascade
   (front-page, hero-fit, landing-atmosphere, discord-note, screen-fit, viewport-fit, mobile-header,
   mobile-experience, render-mode). The `.landing-atmosphere` prefix is kept where the old rules had
   it, so page-level and shared rules keep losing to these exactly as before.
   Order: base rules → min-width blocks → max-width blocks (widest first) → reduced motion. */

/* ── The note opens (intro cover) ── */
.cover {
  position: fixed;
  inset: 0;
  z-index: 300;
  perspective: 2400px;
  pointer-events: none;
}

.cover__board {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  transform-origin: 0 50%;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0) 5%),
    #070808;
  box-shadow:
    inset 0 0 0 14px #070808,
    inset 0 0 0 15px rgba(238, 232, 226, 0.12),
    40px 0 120px rgba(0, 0, 0, 0.8);
  animation: cover-open 1.5s cubic-bezier(0.7, 0, 0.2, 1) 0.7s forwards;
  backface-visibility: hidden;
}

.cover__dagger .dag {
  width: 22px;
  height: 37px;
  filter: drop-shadow(0 0 12px rgba(240, 6, 70, 0.6));
}

/* "Death Note" is the embedded @font-face from base.css. */
.cover__title {
  font-family: "Death Note", var(--font-serif);
  font-size: clamp(64px, 13vw, 190px);
  line-height: 0.8;
  color: var(--ivory);
  text-transform: uppercase;
}

.cover__sub {
  font-family: var(--font-hand);
  font-weight: 600;
  margin-top: 18px;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--ash);
  transform: rotate(-3deg);
}

/* hero.js adds .is-skip on the first wheel/pointer/key: the board closes fast. */
.cover.is-skip .cover__board {
  animation-duration: 0.4s;
  animation-delay: 0s;
}

@keyframes cover-open {
  0% {
    transform: rotateY(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotateY(-104deg);
    opacity: 0;
  }
}

/* The hero entrance waits under the closed cover (body.intro is removed by hero.js). */
body.intro .hero .up {
  animation-play-state: paused;
}

/* ── Notebook paper ── */
/* The margin line the paper gradients draw. body.landing-atmosphere is made the stacking root
   for the body copy of the paper (position, isolation) by base.css. */
body.landing-atmosphere {
  --notebook-margin: clamp(48px, 7vw, 144px);
}

/* The paper is painted twice from one geometry (hero.js sets the --paper-* variables on body):
   once inside the hero, as the backdrop the film screens onto, and once by the body for the
   bands the hero cannot paint. Keeping the blend inside the hero means the compositor only
   builds a hero-sized backdrop while the hero is on screen. */
.landing-atmosphere .hero::before,
body.landing-atmosphere::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--paper-height, 1100px);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent var(--paper-fade-start, 85%), #000 100%),
    linear-gradient(
      90deg,
      transparent var(--notebook-margin),
      rgba(240, 6, 70, 0.22) var(--notebook-margin),
      rgba(240, 6, 70, 0.22) calc(var(--notebook-margin) + 1px),
      transparent calc(var(--notebook-margin) + 1px)
    ),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, 0.04) 31px 32px),
    radial-gradient(70% 55% at 50% 38%, rgba(240, 6, 70, 0.16), transparent 65%),
    radial-gradient(40% 40% at 88% 72%, rgba(141, 0, 31, 0.18), transparent 70%),
    var(--ink);
}

.landing-atmosphere .hero::before {
  top: calc(-1 * var(--paper-hero-top, 0px));
}

/* The body copy shows only the bands above the hero and the fade tail below it. */
body.landing-atmosphere::before {
  top: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--paper-hero-top, 0px),
    0 var(--paper-hero-top, 0px),
    0 var(--paper-hero-end, 100%),
    100% var(--paper-hero-end, 100%),
    100% 100%,
    0 100%
  );
}

/* The layer the handwritten names appear on. */
.paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), #000 20%, #000 80%, transparent);
}

/* hero.js positions each name with inline font-size, --r, --o, top and left. */
.paper .nm {
  position: absolute;
  font-family: var(--font-hand);
  color: var(--ivory);
  opacity: 0;
  font-size: 34px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(var(--r, 0deg)) translateZ(0);
  clip-path: inset(-20% 100% -20% -5%);
  will-change: clip-path, opacity;
}

/* `write` is the shared handwriting keyframes in base.css (also used by the signature). */
.paper .nm.on {
  animation:
    write 1.1s var(--ease) forwards,
    ink 7s linear forwards,
    erase-name 1.4s cubic-bezier(0.4, 0, 0.2, 1) 5.6s forwards;
}

@keyframes ink {
  0% {
    opacity: 0;
  }
  8%,
  100% {
    opacity: var(--o, 0.3);
  }
}

@keyframes erase-name {
  0% {
    clip-path: inset(-20% -5% -20% -5%);
    opacity: var(--o, 0.3);
  }
  100% {
    clip-path: inset(-20% -5% -20% 105%);
    opacity: 0;
  }
}

/* ── Hero layout ── */
/* The hero isolates so its ::before paper and the film's screen blend stay inside it. */
.landing-atmosphere .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 24px;
  margin-bottom: clamp(80px, 14vw, 150px);
}

.landing-atmosphere .hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 18px;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The lede is hidden on the landing; the film carries the message. */
.landing-atmosphere .hero .lede {
  display: none;
}

/* ── Hero film ── */
/* The stage pins the film and the Discord note in one coordinate space. hero-fit.js sets
   --hero-film-width so the whole introduction fits the first viewport. */
.landing-atmosphere .hero .hero__stage {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  width: min(76vw, 1160px, var(--hero-film-width, 1160px));
  min-width: 0;
  aspect-ratio: 1280 / 520;
  margin: 0 auto;
  justify-self: center;
}

.landing-atmosphere .hero .hero__stage .hero__film {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: 1280 / 520;
  cursor: pointer;
}

/* The title video screens onto the paper; hero.js drives --px/--py/--s on hover. */
.hero__film video,
.hero__film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  mix-blend-mode: screen;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  scale: var(--s, 1);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    scale 0.5s var(--spring),
    opacity 0.4s;
  will-change: transform;
  backface-visibility: hidden;
}

/* While the pointer is tracked the parallax follows it without easing. */
.hero__film.is-tracking video,
.hero__film.is-tracking img {
  transition: opacity 0.4s ease;
}

.hero__film.settle video,
.hero__film.settle img {
  transition:
    transform 0.7s var(--spring),
    scale 0.7s var(--spring),
    opacity 0.4s;
}

.hero__film img {
  opacity: 0;
}

/* .no-video: the still carries the hero until the video actually plays. */
.hero__film.no-video img {
  opacity: 1;
}

.hero__film.no-video video {
  opacity: 0;
}

/* The glitch burst uses the #hero-live-glitch SVG filter defined in index.html. */
.hero__film.glitch:not(.no-video) video,
.hero__film.glitch.no-video img {
  animation: hero-signal var(--glitch-duration, 380ms) steps(1, end) both;
  will-change: transform, filter;
}

@keyframes hero-signal {
  0%,
  18% {
    filter: url(#hero-live-glitch);
    transform: translate3d(-1px, 0, 0);
  }
  19%,
  39% {
    filter: none;
    transform: none;
  }
  40%,
  60% {
    filter: url(#hero-live-glitch);
    transform: translate3d(2px, 0, 0);
  }
  61%,
  78% {
    filter: url(#hero-live-glitch);
    transform: translate3d(-1px, 0, 0);
  }
  79%,
  100% {
    filter: none;
    transform: none;
  }
}

/* ── Hero entrance ── */
.hero .up {
  opacity: 0;
  transform: translateY(16px);
  animation: up 0.9s var(--ease) forwards;
}

/* Delays by position in .hero__in: the lede, the Claim form, the hint. */
.hero .up:nth-child(2) {
  animation-delay: 0.15s;
}

.hero .up:nth-child(3) {
  animation-delay: 0.45s;
}

.hero .up:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes up {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Claim form (hero sizing) ── */
.landing-atmosphere .hero .claim {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: min(720px, 100%);
  min-height: 60px;
  padding: 6px 6px 6px 18px;
}

.landing-atmosphere .hero .claim__input,
.landing-atmosphere .hero .claim__prefix {
  font-size: clamp(16px, 1.5vw, 23px);
}

.landing-atmosphere .hero .claim__input {
  padding-block: 12px;
}

.landing-atmosphere .hero .claim__btn {
  min-height: 46px;
  padding: 12px 22px;
  font-size: 17px;
}

.landing-atmosphere .hero #claim-hint {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: center;
  max-width: 960px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

/* ── Discord note ── */
/* A sticky note pinned beside the girl, inside the stage so it follows the film's geometry. */
.landing-atmosphere .hero .discord-note {
  position: absolute;
  left: 93%;
  top: 28%;
  z-index: 5;
  display: grid;
  gap: 0;
  width: clamp(125px, 14.5%, 170px);
  margin: 0;
  padding: 0;
  text-align: left;
  color: #332b32;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(1px 3px 2px #0003) drop-shadow(3px 12px 9px #0005);
  transform: rotate(-6deg);
  transform-origin: 50% 12%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.landing-atmosphere .hero .discord-note:hover {
  transform: rotate(-5deg);
  box-shadow: none;
}

/* hero.js adds .note-sticking once the cover is gone and the note is in view. */
.landing-atmosphere .discord-note.note-sticking {
  backface-visibility: hidden;
  animation: note-stick-on 1.8s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

@keyframes note-stick-on {
  0% {
    opacity: 0;
    clip-path: inset(-12% -12% -20% 92%);
    transform: perspective(900px) translateX(18px) rotate(-6deg) rotateY(58deg);
    box-shadow: -24px 16px 28px -10px #0007;
  }
  12% {
    opacity: 1;
    transform: perspective(900px) translateX(0) rotate(-6deg) rotateY(48deg);
  }
  55% {
    clip-path: inset(-12% -12% -20% 30%);
    transform: perspective(900px) rotate(-6deg) rotateY(18deg);
    box-shadow: -10px 10px 18px -10px #0007;
  }
  100% {
    opacity: 1;
    clip-path: inset(-12% -12% -20% -12%);
    transform: perspective(900px) rotate(-6deg) rotateY(0);
    box-shadow:
      2px 5px 7px #0004,
      5px 22px 25px -15px #000b;
  }
}

.landing-atmosphere .hero .discord-note[hidden] {
  display: none !important;
}

/* The paper body of the note, with a folded-back corner cut out of it. */
.discord-note__main {
  display: grid;
  gap: 9px;
  padding: 18px 13px 29px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(180deg, #e5d59a 0, #f2e4ae 19%, #f3e5af 75%, #eddda3 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  border-radius: 2px 2px 0 2px;
}

.discord-note__main:focus-visible {
  outline: 2px solid #63518f;
  outline-offset: -4px;
}

.discord-note__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 21px/0.95 var(--font-hand);
}

.discord-note__icon {
  width: 21px;
  height: 21px;
  flex: none;
  fill: #63518f;
  transform: rotate(6deg);
}

.discord-note__caption {
  font: 16px/1.15 var(--font-hand);
  color: #534333;
  margin: 0;
}

.discord-note__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 13px/1.2 var(--font-hand);
  color: #63518f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The peel-off control sits on the folded corner. */
.discord-note__dismiss {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.discord-note__dismiss::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #fff6ce 0%, #e3cf91 48%, #c5ad6e 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 2px;
  filter: drop-shadow(-1px -1px 1px #87713e30);
  transition: filter 0.25s;
}

.discord-note__dismiss:hover::before,
.discord-note__dismiss:focus-visible::before {
  filter: brightness(1.08) drop-shadow(-2px -2px 2px #87713e45);
}

.discord-note__dismiss:focus-visible {
  outline: 2px solid #63518f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Phone hero (hidden above 700px) ── */
.mobile-hero-explore,
.mobile-profile-fan,
.mobile-claim-caption {
  display: none;
}

/* ── Marquee ── */
.marquee {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 clamp(16px, 3vw, 48px);
  overflow: hidden;
  border-block: 1px solid rgba(238, 232, 226, 0.1);
  background: #000;
}

.marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* hero.js builds two identical groups; the track slides by half its width. */
.marquee__track {
  display: flex;
  width: max-content;
  min-width: 200%;
  animation: marquee 72s linear infinite;
  transform: translateZ(0);
}

.marquee__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex: none;
  padding: 18px 24px;
  color: #eee8e2;
  font: 600 16px/1.6 var(--font-ui);
  letter-spacing: 0.015em;
  white-space: nowrap;
}

/* A full turn ends upright; the inverted cross drops before recovering. */
.marquee__item i {
  display: inline-block;
  color: #ff245b;
  font:
    400 22px/1 Georgia,
    serif;
  transform-origin: center;
  animation: marquee-cross-fall 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Offscreen decorative motion should consume no compositor frames (MisaMotion toggles the class). */
.marquee:not(.is-motion-active) .marquee__track,
.marquee:not(.is-motion-active) .marquee__item i {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-cross-fall {
  0%,
  15% {
    transform: translateY(0) rotate(0deg);
  }
  38% {
    transform: translateY(-3px) rotate(180deg);
  }
  60% {
    transform: translateY(8px) rotate(180deg);
  }
  85%,
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

/* ── ≥ 901px: tablet-landscape and up ── */
@media (min-width: 901px) {
  .landing-atmosphere .hero__in {
    max-width: 1600px;
  }

  .landing-atmosphere .hero .claim {
    padding: 6px 6px 6px 22px;
  }

  .landing-atmosphere .hero .claim__input,
  .landing-atmosphere .hero .claim__prefix {
    font-size: clamp(18px, 1.45vw, 24px);
  }

  .landing-atmosphere .hero .claim__btn {
    min-height: 54px;
    padding-inline: 28px;
    font-size: 19px;
  }
}

@media (min-width: 901px) and (max-height: 650px) {
  .landing-atmosphere .hero .claim__btn {
    min-height: 44px;
    font-size: 16px;
  }
}

/* ── ≥ 1051px: desktop ── */
/* The introduction owns the first desktop viewport; its caption ends above the fold. */
@media (min-width: 1051px) {
  .landing-atmosphere .hero {
    padding-block: 12px 24px;
    margin-bottom: clamp(100px, 12vh, 180px);
  }

  .landing-atmosphere .hero__in {
    gap: 18px 16px;
    max-width: 1520px;
  }

  .landing-atmosphere .hero .claim {
    width: min(900px, 65vw);
    min-height: 70px;
  }

  .landing-atmosphere .hero #claim-hint {
    font-size: 14px;
  }
}

@media (min-width: 1051px) and (max-height: 650px) {
  .landing-atmosphere .hero .claim {
    min-height: 56px;
  }

  .landing-atmosphere .hero #claim-hint {
    font-size: 12px;
  }
}

/* ── ≤ 1050px: tablet ── */
@media (max-width: 1050px) {
  .landing-atmosphere .hero .paper {
    opacity: 0.5;
  }

  /* Outranks the inline font-size hero.js writes on each name. */
  .landing-atmosphere .hero .paper .nm {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  .landing-atmosphere .hero .discord-note {
    display: none;
  }
}

/* Short landscape screens (phones held sideways) keep the hero within reach. */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-atmosphere .hero {
    padding-block: 12px 20px;
  }
}

/* ── ≤ 700px: the phone hero ── */
/* Title artwork, then the Claim form, then a fan of profile previews. */
@media (max-width: 700px) {
  body.landing-atmosphere {
    --notebook-margin: 20px;
  }

  .landing-atmosphere .hero {
    padding-block: 46px 38px;
    margin-bottom: 0;
  }

  .landing-atmosphere .hero__in {
    grid-template-rows: repeat(6, auto);
    align-content: start;
    gap: 0;
    width: 100%;
    max-width: 540px;
  }

  /* The artwork bleeds past the gutters on purpose. */
  .landing-atmosphere .hero .hero__stage {
    width: calc(100% + 120px);
    max-width: 680px;
    margin: 0 0 32px;
    mix-blend-mode: screen;
    cursor: default;
  }

  .landing-atmosphere .hero .hero__stage .hero__film {
    max-width: 680px;
    mix-blend-mode: screen;
    cursor: default;
  }

  .landing-atmosphere .hero .paper {
    opacity: 0.12;
  }

  .landing-atmosphere .hero .paper .nm {
    font-size: 16px !important;
  }

  .landing-atmosphere .hero .claim {
    grid-row: 3;
    align-self: auto;
    width: 92%;
    max-width: 360px;
    min-height: 52px;
    margin: 0;
    padding: 4px 4px 4px 12px;
    background: #151216e6;
    border: 1px solid #ffffff24;
    border-radius: 18px;
    box-shadow: 0 10px 35px #0003;
  }

  .landing-atmosphere .hero .claim__prefix {
    font-size: 15px;
    color: #93868e;
  }

  .landing-atmosphere .hero .claim__input {
    font-size: 16px;
    line-height: 1.4;
    padding-block: 10px;
    min-width: 0;
  }

  .landing-atmosphere .hero .claim__btn {
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: 0 4px 18px #f0064630;
  }

  /* The hint and the caption share row 4. The hint shows once it has a verdict; the caption
     hides only for a bad one. */
  .landing-atmosphere .hero #claim-hint {
    grid-row: 4;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: 300px;
    margin: 14px auto 0;
    font-size: 11px;
    line-height: 1.65;
    text-align: center;
    color: #94868f;
  }

  .landing-atmosphere .hero #claim-hint [data-hint-text] {
    min-width: 0;
    text-wrap: balance;
  }

  .landing-atmosphere .hero #claim-hint .dot {
    width: 4px;
    height: 4px;
    flex-shrink: 0;
  }

  .mobile-claim-caption {
    display: block;
    grid-row: 4;
    grid-column: 1;
    max-width: 290px;
    margin: 14px auto 0;
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
    color: #b4a2ad;
  }

  .hero:has(#claim-hint.bad) .mobile-claim-caption {
    visibility: hidden;
  }

  /* Row 6 is reserved so the fan sits where it did; the link itself stays invisible. */
  .landing-atmosphere .hero .mobile-hero-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    grid-row: 6;
    min-height: 44px;
    margin: 8px auto 0;
    padding: 8px 14px;
    color: #baaeb8;
    font-size: 13px;
    text-decoration: none;
  }

  .landing-atmosphere .hero #claim-hint:not(.bad):not(.good),
  .landing-atmosphere .hero .mobile-hero-explore {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-hero-explore span {
    color: #ff2458;
  }

  /* Cards occupy stable slots so all three move together without layout jumps. */
  .mobile-profile-fan {
    position: relative;
    display: block;
    grid-row: 5;
    gap: 0;
    width: 100%;
    max-width: 360px;
    height: 220px;
    margin: 34px auto 0;
    padding: 10px 8px 0;
    isolation: isolate;
    touch-action: pan-y;
  }

  /* Each 36%-wide card moves 32% of the fan width per slot (hero.js rotates data-slot). */
  .mobile-mini {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 36%;
    height: 180px;
    min-width: 0;
    margin: 0;
    padding: 15px 4px;
    color: white;
    text-decoration: none;
    border: 1px solid #ffffff30;
    border-radius: 17px;
    box-shadow: 0 12px 30px #0005;
    background:
      linear-gradient(#09171166, #031009b8),
      url("/assets/profile/green-forest.webp") center/cover;
    transform: translate(0,18px) rotate(-9deg) scale(.92);
    transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .mobile-mini[data-slot="1"] {
    z-index: 3;
    transform: translate(88.888889%,0) rotate(0) scale(1.08);
  }

  .mobile-mini[data-slot="2"] {
    z-index: 2;
    transform: translate(177.777778%,18px) rotate(9deg) scale(.92);
  }

  .mobile-mini:focus-visible {
    outline: 2px solid #ff2458;
    outline-offset: 4px;
  }

  .mobile-mini--crimson {
    border-color: #fb24595c;
    background:
      linear-gradient(#31081533, #150407a8),
      url("/assets/profile/red-picture.webp") center/cover;
  }

  .mobile-mini--blush {
    color: #603649;
    background:
      linear-gradient(#fff6, #edc9da99),
      url("/assets/profile/pink-pattern.webp") center/cover;
  }

  .mobile-mini__avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ffffff45;
  }

  .mobile-mini--crimson .mobile-mini__avatar {
    width: 50px;
    height: 50px;
    border-color: #ff2458;
  }

  .mobile-mini strong {
    font-size: 16px;
    letter-spacing: -0.03em;
  }

  .mobile-mini--crimson strong {
    font-size: 21px;
  }

  .mobile-mini > span {
    font-size: 8px;
    white-space: nowrap;
    opacity: 0.75;
  }

  .landing-atmosphere .marquee {
    min-height: 46px;
    border-color: #ffffff0a;
    background: #0d0a0d;
  }

  .landing-atmosphere .marquee__item {
    font-size: 12px;
    padding: 14px 22px;
    gap: 22px;
    letter-spacing: 0.01em;
  }
}

/* Phone entrances: everything arrives from below once the cover is gone. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* The id in :is() gives this rule id specificity on purpose: it replaces the desktop `up`
     entrance on the Claim form and the hint. */
  .landing-atmosphere .hero :is(.hero__stage, .hero__film, .claim.up, #claim-hint.up, .mobile-profile-fan) {
    animation: phone-arrive 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .landing-atmosphere .hero #claim-hint.up {
    animation-delay: 0.22s;
  }

  body.landing-atmosphere.intro .hero :is(.hero__stage, .hero__film, .claim.up, #claim-hint.up, .mobile-profile-fan) {
    animation-play-state: paused;
  }

  .mobile-mini {
    animation: phone-card-reveal 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .mobile-mini--crimson {
    animation-delay: 0.14s;
  }

  .mobile-mini--blush {
    animation-delay: 0.28s;
  }

  body.landing-atmosphere.intro .mobile-mini {
    animation-play-state: paused;
  }

  .mobile-mini:active {
    translate: 0 -5px;
  }
}

@keyframes phone-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes phone-card-reveal {
  from {
    opacity: 0;
    translate: 0 35px;
    scale: 0.88;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* ── ≤ 600px ── */
@media (max-width: 600px) {
  .marquee {
    padding-inline: 8px;
  }
}

/* ── ≤ 360px ── */
@media (max-width: 360px) {
  .landing-atmosphere .hero .claim__prefix {
    font-size: 13px;
  }

  .landing-atmosphere .hero .claim__btn {
    padding-inline: 12px;
  }
}

/* Lite render mode (the still with real transparency in place of the video) is styled by the
   html.gpu-lite rules in motion.css; hero.js swaps in the alpha still. */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cover {
    display: none;
  }

  .hero .up {
    opacity: 1;
    transform: none;
  }

  .paper .nm {
    clip-path: none;
    opacity: var(--o, 0.3);
  }

  .discord-note {
    transition: none;
  }

  .discord-note__dismiss::before {
    transition: none;
  }

  .mobile-mini {
    transition: none;
  }

  /* The strip becomes a plain scrollable row of one group. */
  .marquee__track {
    animation: none;
    min-width: 0;
  }

  .marquee__group + .marquee__group {
    display: none;
  }

  .marquee__viewport {
    overflow-x: auto;
    mask-image: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .marquee__viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .marquee__item i {
    animation: none;
  }
}