/* ============================================================================
   Mission: SPACE COMIC — hero motion (delivery build)
   ----------------------------------------------------------------------------
   Shipped as hero-motion/css/logomotion.css and loaded by the host LP.
   FULLY SCOPED under `.hero-section .lm-*` — never styles html / body / *,
   so dropping it into the page cannot disturb the host layout.

   Display contract:
     - JS enabled (normal): `.lm-hero` is shown (black backdrop first, then the
       background fades in and the logo draws). The host's key visual is NOT in
       the DOM (it lives in <noscript>), so there is no flash / swap.
     - JS disabled: the <noscript> block renders — its inline <style> hides
       `.lm-hero` and shows the host's existing key-visual <img>. Pure fallback.

   Asset url()s are relative to THIS file (hero-motion/css/), i.e. ../img/ and
   ../fonts/, so they resolve wherever the hero-motion folder is hosted.
   ============================================================================ */

/* OCR-B Std is served by Adobe Fonts (Typekit); the host adds
   <link href="https://use.typekit.net/jgo3cwm.css"> (see README).
   Tazugane Gothic StdN (subtitle copy only) is self-hosted + subset: */
@font-face {
  font-family: "TazuganeGothicStdN";
  src: url("../fonts/TazuganeGothicStdN-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

/* --- layout box: full-width, height = key-visual aspect (NOT viewport height).
       Shown by default; <noscript> hides it when JS is off. --- */
.hero-section .lm-hero {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080; /* PC key visual 16:9 — height follows hero width */
  overflow: hidden;
}
.hero-section .lm-hero,
.hero-section .lm-hero * {
  box-sizing: border-box;
}
@media (max-width: 1080px) {
  .hero-section .lm-hero {
    aspect-ratio: 1125 / 1921; /* SP key visual (portrait) */
  }
}

/* --- black backdrop: always present, shown first (guarantees a black base) --- */
.hero-section .lm-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}

/* --- background layer: the key visual. Starts invisible (opacity:0) so it
       doesn't pop before GSAP; JS fades it in (opacity 0->1) while scaling
       1.4 -> 1. Full-width, top-aligned (matches the locked composition). --- */
.hero-section .lm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background-image: url("../../../../content/files/spacecomic0727/img/bg_pc.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  transform-origin: center; /* scale from the image center (JS overrides via gsap.set, kept in sync) */
  will-change: transform, opacity;
}
@media (max-width: 1080px) {
  .hero-section .lm-hero__bg {
    background-image: url("../../../../content/files/spacecomic0727/img/bg_sp.webp");
  }
}

/* --- logo stage: JS injects <svg class="logo-svg"> here and positions it in vw --- */
.hero-section #lm-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translateZ(0); /* own GPU layer — keeps the drop-shadow glow smooth on mobile */
}
.hero-section #lm-stage .logo-svg {
  display: block;
  /* let the glow halo extend past the SVG viewBox (up to the hero box). The
     hero box itself / the host .hero-section may still clip a very large glow. */
  overflow: visible;
  /* the engine pulses this SVG's CSS drop-shadow glow (logoDraw glowFilterCss) */
  will-change: filter;
}

/* --- corner marks: reproduce the engine's placeElement(locked) with vw, as CSS
       backgrounds (paths resolve relative to this css, not the host page). --- */
.hero-section .lm-hero__mark {
  position: absolute;
  z-index: 4;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  pointer-events: none;
}
.hero-section .lm-hero__mark--kodansha {
  background-image: url("../../../../content/files/spacecomic0727/img/kodansha.svg");
  aspect-ratio: 168.212 / 43.444; /* kodansha.svg intrinsic ratio */
}
.hero-section .lm-hero__mark--poc {
  background-image: url("../../../../content/files/spacecomic0727/img/PoC.svg");
  aspect-ratio: 177.387 / 20.667; /* PoC.svg intrinsic ratio */
}
/* PC (>1080px) — values from preset-contain.json `marks` */
@media (min-width: 1081px) {
  .hero-section .lm-hero__mark--kodansha {
    left: calc(50% + -42.9vw);
    top: 53.1vw;
    width: 6.2vw;
  }
  .hero-section .lm-hero__mark--poc {
    left: calc(50% + 42.2vw);
    top: 53.7vw;
    width: 8.6vw;
  }
}
/* SP (<=1080px) */
@media (max-width: 1080px) {
  .hero-section .lm-hero__mark--kodansha {
    left: calc(50% + -34.2vw);
    top: 162.8vw;
    width: 15.7vw;
  }
  .hero-section .lm-hero__mark--poc {
    left: calc(50% + 33.9vw);
    top: 164.7vw;
    width: 16.5vw;
  }
}

/* --- SVG subtitle font mapping (the <text> nodes use these class hooks).
       Mirrors the engine's contain page so the copy renders in the right face. --- */
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-3,
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-3 tspan,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-7,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-7 tspan {
  /* Match the host site's font stack so this copy uses the Tazugane the page
     already loads. "TazuganeGothicStdN" (our bundled Thin subset) is only a
     fallback in case the host's kit doesn't serve the Thin (200) weight. */
  font-family:
    "Tazugane Kaku Gothic StdN", "たづがね角ゴシック", "TazuganeGothicStdN",
    "Noto Sans JP", sans-serif;
  font-weight: 200;
}
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-7,
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-8,
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-9,
.hero-section .lm-hero .logo-svg.variant-horizontal .cls-10,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-8,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-9,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-10,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-11,
.hero-section .lm-hero .logo-svg.variant-vertical .cls-12 {
  font-family: "ocr-b-std";
}

/* --- visually-hidden SEO/a11y copy (kept readable for crawlers/AT) --- */
.hero-section .lm-hero__a11y {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================================
   Flash fix: hide the JS-driven logo + marks until the motion is ready (the
   bundle adds `.lm-ready` to `.hero-section` after layout is settled). The
   black backdrop + (GSAP-controlled, opacity:0) background show meanwhile, so
   the hero is black until everything reveals together — no unsized-SVG flash.
   ========================================================================== */
.hero-section:not(.lm-ready) #lm-stage,
.hero-section:not(.lm-ready) .lm-hero__mark {
  visibility: hidden;
}