/* =========================================================
   MG01 Portal Card (Main Gimmick) — scoped / drop-in module
   ---------------------------------------------------------
   - All styles are scoped under: [data-mg="mg01"]
   - No build step, no dependencies beyond GSAP/ScrollTrigger
   ========================================================= */

/* Root (safe defaults; override via CSS variables if needed) */
[data-mg="mg01"]{
  --mg-bg: #f7f7f5;
  --mg-ink: #0c0c0f;
  --mg-font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  --mg-accent: #b8b8b8;     /* neutral */
  --mg-accent2:#f0f0f0;     /* airy neutral */
  --mg-gold:   #e6c58b;     /* warm (thin) */

  --mg-dust: rgba(20,24,33,.22); /* particle density */
  --mg-shadow: rgba(2,6,23,.16);
  --mg-line: rgba(12,12,18,.10);

  /* -------------------------------------------------------
     Perf / tuning knobs (safe to tweak without touching TL)
     ------------------------------------------------------- */
  /* Portal ring thickness (thinner & more minimal; responsive) */
  --mg-ring-thickness: clamp(3px, 0.65vmin, 8px);
  --mg-ring-thickness2: calc(var(--mg-ring-thickness) - 1px);

  /* Portal shadow (drop-shadow is visually great but can be heavy on Safari)
     You can reduce blur/radius safely without changing the card motion. */
  /* lighter shadow to keep the ring minimal */
  --mg-portal-filter: drop-shadow(0 18px 60px rgba(2,6,23,.14));

  /* Paper micro-lines overlay strength */
  --mg-paper-opacity: .18;

  /* Panel shape (visual only)
     Make the panel circular to avoid the “card/gacha” association.
     Motion logic stays unchanged.
     To revert: set --mg-card-w/--mg-card-h back to the original values
     and --mg-card-r back to 28px. */
  --mg-card-size: clamp(300px, 52vmin, 620px);
  --mg-card-w: var(--mg-card-size);
  --mg-card-h: var(--mg-card-size);
  --mg-card-r: 999px;

  /* Logo (front/back)
   - Front: official mark (star + word)
   - Back : word-only (for the “MOVEMENT” hit on approach)
   - assets/ の画像を差し替えるだけでロゴ更新できます
 */
--mg-logo-front: url("./assets/movement_logo.png");
	/* Back face: use the hi-res emblem so it stays crisp even during the rush-in */
	--mg-logo-back:  url("./assets/movement_logo.png");

/* Backward-compat (older builds referenced --mg-logo) */
--mg-logo: var(--mg-logo-front);

/* Shared */
--mg-logo-inset: 18px;            /* padding inside the card */
--mg-logo-z: 76px;                /* depth (translateZ) */

/* Front tuning */
--mg-logo-front-size: 200%;
--mg-logo-front-pos: 50% 46%;
/* Emblem: readable logo (正文字をしっかり見せる) */
--mg-logo-opacity-front: 0.72;
--mg-logo-front-filter: brightness(0) blur(0.8px);
--mg-logo-front-blend: normal;

	/* Back tuning */
	/* Keep the whole mark inside the circle (no over-zoom) */
	--mg-logo-back-size: contain;
	--mg-logo-back-pos: 50% 55%;
	/* “濃さ最大”要望（ただし白背景に馴染む範囲で） */
	--mg-logo-opacity-back:  0.95;
	--mg-logo-back-filter: brightness(0);
	--mg-logo-back-blend: normal;

	/* Optional: subtle interior photo tint on the FRONT face (page-level override) */
	--mg-front-photo: none;
	--mg-front-photo-opacity: 0;
	--mg-front-photo-filter: grayscale(1) contrast(1.06) brightness(1.07);
	--mg-front-photo-blend: normal;

/* Legacy fallback knobs (optional) */
--mg-logo-size: 200%;
--mg-logo-pos: 50% 46%;
--mg-logo-filter: none;
--mg-logo-blend: normal;

    /* -------------------------------------------------------
     Bridge (optional)
     - Kinetic typography + geometry (no “light” effects)
     - Fills the blank after the card rush with bold, inorganic motion
     ------------------------------------------------------- */
  --mg-bridge-grid-opacity: 0.14;
  --mg-bridge-echo-opacity: 0.55;

  --mg-bridge-type-outline-opacity: 0.18;
  --mg-bridge-type-fill-opacity: 0.88;
  --mg-bridge-frame-opacity: 0.16;
  --mg-bridge-bar-opacity: 0.08;
  --mg-bridge-ticker-opacity: 0.22;

  /* Micro-typography “wallpaper” (subtle) */
  --mg-bridge-micro-opacity: 0.39;
  --mg-bridge-micro-size: 11px;
  --mg-bridge-micro-stroke: rgba(12,12,18,.12);

  /* -------------------------------------------------------
     Handoff (Slice Gate)
     - Keep it typographic + mechanical (no glow)
     - User requested: make the HUGE word more visible
     ------------------------------------------------------- */
  --mg-handoff-gate-opacity: 0.34;
  --mg-handoff-gate-stroke: 2px;
  --mg-handoff-gate-stroke-ink: rgba(12,12,18,.26);
  --mg-handoff-marks-opacity: 0.72;
  /* Side rails (micro-type) */
  --mg-handoff-rails-opacity: 0.66;
  --mg-handoff-rail-ink: rgba(12,12,18,.62);
  --mg-handoff-rail-size: 11px;
  --mg-handoff-rail-spacing: .32em;
  --mg-handoff-rail-line: rgba(12,12,18,.10);

  /* Right rail visibility tuning:
     The right rail scrolls upward, so starting it a bit lower makes it noticeable. */
  --mg-handoff-rail-right-start: 66vh;




  position: relative;
  width: 100%;
  min-height: 100vh;
  isolation: isolate;
  overflow: visible;
  contain: none;
  background: var(--mg-bg);
  color: var(--mg-ink);
}



/* -------------------------------------------------------
   Perf mode (Safari friendly)
   - MG01.init(..., { perf: "auto" }) will add .is-perf on Safari
   - You can also force it with { perf:true } or disable with { perf:false }
   ------------------------------------------------------- */
[data-mg="mg01"].is-perf{
  /* drop-shadow / blend-modes can be costly in Safari */
  --mg-portal-filter: none;
  --mg-paper-opacity: .10;
}

/* Stage */
[data-mg="mg01"] .mg01-stage{
  position: relative;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: visible;

  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* Background texture + subtle light field */
[data-mg="mg01"] .mg01-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 900px at 50% 30%, rgba(12,12,18,.04), transparent 60%),
    radial-gradient(900px 720px at 20% 78%, rgba(230,197,139,.14), transparent 65%),
    radial-gradient(900px 720px at 88% 78%, rgba(12,12,18,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
  opacity: 1;
}

/* Paper-ish micro lines (very subtle) */
[data-mg="mg01"] .mg01-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(12,12,18,.035) 0px,
      rgba(12,12,18,.035) 1px,
      transparent 1px,
      transparent 22px
    );
  opacity: var(--mg-paper-opacity, .18);
  mix-blend-mode: multiply;
}


/* Perf: avoid full-screen blend (keeps the same idea, cheaper) */
[data-mg="mg01"].is-perf .mg01-stage::after{
  mix-blend-mode: normal;
  opacity: var(--mg-paper-opacity, .10);
}


/* Particle canvas */
[data-mg="mg01"] .mg01-dust{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

/* Vignette (adds “lens” feeling) */
[data-mg="mg01"] .mg01-vignette{
  position:absolute;
  inset:-10%;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0) 0 54%, rgba(2,6,23,.10) 100%),
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0) 0 62%, rgba(2,6,23,.06) 100%);
  opacity:.9;
  transform: translateZ(0);
}

/* Idle movement layer (pre-scroll)
   - keeps the flow alive after the opening
   - fades out once the user starts scrolling */
[data-mg="mg01"] .mg01-idleBands {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
}

[data-mg="mg01"] .mg01-idleBand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  max-width: 1800px;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

[data-mg="mg01"] .mg01-idleBand--a {
  transform: translate(-50%, -50%) rotate(-12deg) translateY(-170px);
}

[data-mg="mg01"] .mg01-idleBand--b {
  transform: translate(-50%, -50%) rotate(9deg) translateY(165px);
}

[data-mg="mg01"] .mg01-idleBand__wrap {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mg01-idle-band-move 22s linear infinite;
}

[data-mg="mg01"] .mg01-idleBand--b .mg01-idleBand__wrap {
  animation-direction: reverse;
  animation-duration: 30s;
}

[data-mg="mg01"] .mg01-idleBand__track {
  white-space: nowrap;
  padding-right: 6vw;
  font-family: var(--mg-font);
  font-weight: 600;
  font-size: clamp(10px, 1.15vmin, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(12, 12, 18, 0.34);
}

[data-mg="mg01"] .mg01-idleBand--b .mg01-idleBand__track {
  font-weight: 500;
  font-size: clamp(9px, 1.0vmin, 12px);
  letter-spacing: 0.36em;
  color: rgba(12, 12, 18, 0.24);
}

@keyframes mg01-idle-band-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Portal ring */
[data-mg="mg01"] .mg01-portal{
  position:absolute;
  left:50%;
  top:50%;
  width: min(78vmin, 900px);
  height: min(78vmin, 900px);
  border-radius: 999px;
  transform: translate3d(-50%,-50%,0) scale(.78) rotate(-22deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  opacity: 0;
  z-index:3;
  will-change: transform, opacity;
  filter: var(--mg-portal-filter);
}


/* Perf: when drop-shadow is disabled, add a lightweight soft glow */
[data-mg="mg01"].is-perf .mg01-portal{
  background:
    /* minimal / no-blue tint */
    radial-gradient(closest-side at 50% 50%, rgba(12,12,18,.06), transparent 72%);
}


/* Main ring (conic gradient + mask) */
[data-mg="mg01"] .mg01-portal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  /* Minimal ring: keep conic variance for perceived motion, but remove blue hue */
  background:
    conic-gradient(
      from 210deg,
      rgba(12,12,18,0) 0%,
      rgba(12,12,18,.20) 16%,
      rgba(12,12,18,.10) 30%,
      rgba(12,12,18,.16) 54%,
      rgba(12,12,18,0) 76%,
      rgba(12,12,18,0) 100%
    );

  /* ring thickness */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--mg-ring-thickness)),
    #000 calc(100% - var(--mg-ring-thickness2))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--mg-ring-thickness)),
    #000 calc(100% - var(--mg-ring-thickness2))
  );

  opacity:.58;
}

/* Inner hairline ring + subtle depth */
[data-mg="mg01"] .mg01-portal::after{
  content:"";
  position:absolute;
  inset: 14%;
  border-radius:inherit;
  border: 1px solid rgba(12,12,18,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 0 0 1px rgba(2,6,23,.06);
  opacity:.88;
  transform: translateZ(60px);
}

/* Card wrap (scroll-driven) */
[data-mg="mg01"] .mg01-cardWrap{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%,-50%,0) scale(.92);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index:4;
  opacity: 0;
  will-change: transform, opacity;
}


/* Card shadow (Perf mode): use a gradient shadow instead of huge blur box-shadows */
[data-mg="mg01"] .mg01-cardWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 150%;
  height: 150%;
  transform: translate3d(-50%, -42%, -1px);
  border-radius: 999px;
  pointer-events:none;
  opacity: 0; /* enabled in .is-perf */
  background:
    radial-gradient(closest-side, rgba(2,6,23,.22), rgba(2,6,23,0) 70%),
    radial-gradient(closest-side, rgba(2,6,23,.12), rgba(2,6,23,0) 55%);
  will-change: transform, opacity;
}

[data-mg="mg01"].is-perf .mg01-cardWrap::before{
  opacity: .85;
}


/* Card (pointer tilt lives here) */
[data-mg="mg01"] .mg01-card{
  width: var(--mg-card-w);
  height: var(--mg-card-h);
  border-radius: var(--mg-card-r);
  position:relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background:
    radial-gradient(120% 80% at 15% 20%, rgba(255,255,255,.95), rgba(255,255,255,.62) 52%, rgba(255,255,255,.34) 100%);

  border: 1px solid rgba(12,12,18,.10);
  box-shadow:
    0 38px 120px rgba(2,6,23,.18),
    0 6px 24px rgba(2,6,23,.10);

  overflow: hidden;
  will-change: transform;
}


/* Perf: tighter blur -> smaller raster area, keeps depth via ::before shadow */
[data-mg="mg01"].is-perf .mg01-card{
  box-shadow:
    0 20px 70px rgba(2,6,23,.16),
    0 4px 18px rgba(2,6,23,.08);
}


/* Crisp edge highlight */
[data-mg="mg01"] .mg01-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0) 70%,
      rgba(255,255,255,.55) 100%);
  opacity:.55;
  mix-blend-mode: soft-light;
}

/* Thin inner border */
[data-mg="mg01"] .mg01-card::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--mg-card-r) - 10px);
  pointer-events:none;
  border: 1px solid rgba(12,12,18,.08);
  opacity:.7;
}

/* Layer base */
[data-mg="mg01"] .mg01-layer{
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--mg-card-r) - 14px);
  transform-style: preserve-3d;
  pointer-events:none;
  will-change: transform, opacity;
}

/* Layer 1: soft gradient + tiny noise dots */
[data-mg="mg01"] .mg01-layer.layer-1{
  background:
    radial-gradient(70% 60% at 18% 22%, rgba(12,12,18,.03), transparent 60%),
    radial-gradient(70% 60% at 82% 76%, rgba(230,197,139,.18), transparent 62%),
    radial-gradient(1px 1px at 10% 20%, rgba(12,12,18,.14), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(12,12,18,.12), transparent 60%),
    radial-gradient(1px 1px at 72% 36%, rgba(12,12,18,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
  opacity:.9;
}

/* Optional: subtle interior photo tint on the front face */
[data-mg="mg01"] .mg01-frontPhoto{
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--mg-card-r) - 14px);
  pointer-events:none;

  background-image: var(--mg-front-photo);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  opacity: var(--mg-front-photo-opacity);
  filter: var(--mg-front-photo-filter);
  mix-blend-mode: var(--mg-front-photo-blend);

  transform: translateZ(.5px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Layer 2: precision grid (very subtle) */
[data-mg="mg01"] .mg01-layer.layer-2{
  inset: 26px;
  border-radius: calc(var(--mg-card-r) - 26px);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(12,12,18,.11) 0px,
      rgba(12,12,18,.11) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(12,12,18,.11) 0px,
      rgba(12,12,18,.11) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .10;
  mix-blend-mode: multiply;
}

/* Layer 3: “lens” highlight */
[data-mg="mg01"] .mg01-layer.layer-3{
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
    radial-gradient(70% 60% at 20% 100%, rgba(255,255,255,.42), rgba(255,255,255,0) 65%);
  opacity:.45;
  mix-blend-mode: soft-light;
}


/* -------------------------------------------------------
   Card logo (front/back)
   - Front: --mg-logo-front
   - Back : --mg-logo-back
   - (Fallback) --mg-logo は旧互換用
   ------------------------------------------------------- */
[data-mg="mg01"] .mg01-logo{
  position:absolute;
  inset: var(--mg-logo-inset, 20px);
  border-radius: calc(var(--mg-card-r) - var(--mg-logo-inset, 20px));
  pointer-events:none;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;

  opacity: .5;
  filter: none;
  mix-blend-mode: normal;

  /* Safari: keep face switching stable (prevents mirrored bleed-through) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-logo--front{
  background-image: var(--mg-logo-front, var(--mg-logo));
  background-size: var(--mg-logo-front-size, var(--mg-logo-size, contain));
  background-position: var(--mg-logo-front-pos, var(--mg-logo-pos, 50% 54%));

  /* 表 = エンブレム面（正文字） */
  opacity: var(--mg-logo-opacity-front, .22);
  filter: var(--mg-logo-front-filter, var(--mg-logo-filter, none));
  mix-blend-mode: var(--mg-logo-front-blend, var(--mg-logo-blend, normal));

  transform: translate3d(0, 0, var(--mg-logo-z, 76px));
}

[data-mg="mg01"] .mg01-logo--back{
  background-image: var(--mg-logo-back, var(--mg-logo));
  background-size: var(--mg-logo-back-size, var(--mg-logo-size, contain));
  background-position: var(--mg-logo-back-pos, var(--mg-logo-pos, 50% 54%));

  /* 裏 = 主役（正文字）なので最大濃さ */
  opacity: var(--mg-logo-opacity-back, 1);
  filter: var(--mg-logo-back-filter, var(--mg-logo-filter, none));
  mix-blend-mode: var(--mg-logo-back-blend, var(--mg-logo-blend, normal));

  /* 裏面に貼り付けた上で、Z方向に持ち上げて埋もれ防止（Safariで効く） */
  transform: rotateY(180deg) translate3d(0, 0, var(--mg-logo-z, 76px));
}

/* Perf: avoid blend + heavy filters inside 3D transforms */
[data-mg="mg01"].is-perf .mg01-logo{
  filter: none;
  mix-blend-mode: normal;
}

/* Moving glint (scroll will sweep) */
[data-mg="mg01"] .mg01-glint{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.9) 45%,
    rgba(255,255,255,0) 70%
  );
  transform: translate3d(-45%, 0, 80px) rotate(18deg);
  opacity: 0;
  mix-blend-mode: overlay;
  will-change: transform, opacity;
}

/* Center dot */
[data-mg="mg01"] .mg01-dot{
  position:absolute;
  left:50%;
  top:50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate3d(-50%,-50%,120px) scale(.7);
  background: rgba(12,12,18,.78);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.55),
    0 18px 60px rgba(2,6,23,.18);
  opacity: 0;
  z-index:5;
  will-change: transform, opacity;
}

/* Dot outer ring */
[data-mg="mg01"] .mg01-dot::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:inherit;
  border: 1px solid rgba(12,12,18,.16);
  opacity:.45;
}

/* Card-attached scroll cue (bigger, attached to the card) */
[data-mg="mg01"] .mg01-cardCue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.3vmin, 30px);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  transform: translate3d(-50%, 0, 92px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  font-family: var(--mg-font);
  font-weight: 700;
  font-size: clamp(13px, 1.6vmin, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(12, 12, 18, 0.62);

  text-shadow: 0 12px 28px rgba(2, 6, 23, 0.16);
}

[data-mg="mg01"] .mg01-cardCue__arrow {
  display: inline-block;
  font-size: 1.25em;
  line-height: 1;
  transform: translateY(-1px);
  will-change: transform, opacity;
  animation: mg01-card-cue-arrow 1.25s ease-in-out infinite;
}

@keyframes mg01-card-cue-arrow {
  0%,
  100% {
    transform: translateY(-2px);
    opacity: 0.62;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

/* Scroll cue */
[data-mg="mg01"] .mg01-scrollHint{
  position:absolute;
  left:50%;
  bottom: clamp(18px, 4vmin, 46px);
  transform: translate3d(-50%, 0, 0);
  display:flex;
  align-items:center;
  gap: .85em;

  font-family: var(--mg-font, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(12,12,18,.74);
  mix-blend-mode: normal;

  /* Readability without looking “glowy” */
  text-shadow:
    0 1px 0 rgba(255,255,255,.78),
    0 18px 40px rgba(12,12,18,.10);

  opacity: 0;
  pointer-events:none;
  z-index: 7;
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-scrollHint__arrow{
  position: relative;
  width: 18px;
  height: 26px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  font-size: 14px;
  transform: translate3d(0, 0, 0);
}

/* Scroll cue icon: subtle track + moving dot (premium, unmistakable) */
[data-mg="mg01"] .mg01-scrollHint__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:1px;
  height:16px;
  background: currentColor;
  opacity:.35;
  transform: translateX(-50%);
}

[data-mg="mg01"] .mg01-scrollHint__arrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:2px;
  width:3px;
  height:3px;
  border-radius: 999px;
  background: currentColor;
  transform: translate3d(-50%, 0, 0);
  opacity:0;
  animation: mg01ScrollDot 1.18s cubic-bezier(.22,.61,.36,1) infinite;
}

@keyframes mg01ScrollDot{
  0%   { transform: translate3d(-50%, 0, 0);  opacity:0; }
  18%  { opacity:.85; }
  70%  { transform: translate3d(-50%, 12px, 0); opacity:.85; }
  100% { transform: translate3d(-50%, 16px, 0); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  [data-mg="mg01"] .mg01-scrollHint__arrow::after{
    animation: none;
    opacity: .70;
    transform: translate3d(-50%, 12px, 0);
  }
}

/* -------------------------------------------------------
   Bridge overlay (optional)
   - Kinetic typography + geometry (no “light” effects)
   - Bold, inorganic motion that matches the “MOVEMENT” theme
   ------------------------------------------------------- */

[data-mg="mg01"] .mg01-bridge{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  transform: translateZ(0);
  will-change: opacity;
}

/* Blueprint grid (slightly stronger than the base stage) */
[data-mg="mg01"] .mg01-bridgeGrid{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transform: scale(1.10);
  transform-origin: 50% 50%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(12,12,18,.09) 0px,
      rgba(12,12,18,.09) 1px,
      transparent 1px,
      transparent 52px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(12,12,18,.09) 0px,
      rgba(12,12,18,.09) 1px,
      transparent 1px,
      transparent 52px
    );
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}

/* Micro typography “wallpaper”
   - Many small words, subtle motion (handled by JS)
   - Masked so the center stays clean → big type pops
*/
[data-mg="mg01"] .mg01-bridgeMicro{
  position:absolute;
  inset: -8vh -22vw;
  z-index:1;
  opacity:0;
  pointer-events:none;
  transform: translateZ(0) rotate(-10deg) scale(1.06);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 8vh 0;
  gap: 14px;
  mix-blend-mode: multiply;

  /* “quiet center” mask */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%);
}

[data-mg="mg01"] .mg01-bridgeMicro__row{
  display:block;
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--mg-bridge-micro-size);
  letter-spacing: .34em;
  color: transparent;
  -webkit-text-stroke: 1px var(--mg-bridge-micro-stroke);
  opacity: .85;
  transform: translate3d(0,0,0);
  will-change: transform;
}

[data-mg="mg01"].is-perf .mg01-bridgeMicro{
  mix-blend-mode: normal;
  -webkit-mask-image: none;
          mask-image: none;
}

[data-mg="mg01"].is-perf .mg01-bridgeGrid{
  mix-blend-mode: normal;
}

/* Echo rings (no glow / no gradients: just geometry) */
[data-mg="mg01"] .mg01-bridgeEcho{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  transform: translate3d(-50%,-50%,0) scale(.90);
  opacity:0;
  z-index:1;
  pointer-events:none;
  will-change: transform, opacity;
  border: 1px solid rgba(12,12,18,.10);
}

[data-mg="mg01"] .mg01-bridgeEcho.echo-1{
  width: min(92vmin, 1000px);
  height: min(92vmin, 1000px);
  border-color: rgba(12,12,18,.12);
}

[data-mg="mg01"] .mg01-bridgeEcho.echo-2{
  width: min(76vmin, 860px);
  height: min(76vmin, 860px);
  border-color: rgba(230,197,139,.18);
}

[data-mg="mg01"] .mg01-bridgeEcho.echo-3{
  width: min(62vmin, 720px);
  height: min(62vmin, 720px);
  border-color: rgba(12,12,18,.10);
}

/* Framing geometry (Swiss / editorial feel) */
[data-mg="mg01"] .mg01-bridgeFrame{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%,-50%,0) scale(.96) rotate(-8deg);
  opacity:0;
  z-index:3;
  pointer-events:none;
  will-change: transform, opacity;
  border: 1px solid rgba(12,12,18,.14);
  border-radius: 42px;
}

[data-mg="mg01"] .mg01-bridgeFrame.frame-1{
  width: min(94vmin, 1040px);
  height: min(94vmin, 1040px);
}

[data-mg="mg01"] .mg01-bridgeFrame.frame-2{
  width: min(64vmin, 720px);
  height: min(64vmin, 720px);
  border-radius: 34px;
  opacity:0;
}

/* Bold bars (pure shape, no glow) */
[data-mg="mg01"] .mg01-bridgeBar{
  position:absolute;
  left:-25%;
  right:-25%;
  height: 140px;
  opacity:0;
  z-index:2;
  pointer-events:none;
  will-change: transform, opacity;
  background: rgba(12,12,18,.06);
  transform: translate3d(0,0,0) rotate(-12deg);
}

[data-mg="mg01"] .mg01-bridgeBar.bar-1{
  top: 44%;
}

[data-mg="mg01"] .mg01-bridgeBar.bar-2{
  height: 86px;
  top: 56%;
  transform: translate3d(0,0,0) rotate(10deg);
  background: rgba(12,12,18,.05);
}

/* Kinetic typography */
[data-mg="mg01"] .mg01-bridgeType{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  transform: translateZ(0);
}

[data-mg="mg01"] .mg01-bridgeType__outline{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%,-50%,0) rotate(-8deg);
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(66px, 13vmin, 188px);
  letter-spacing: .18em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(12,12,18,.18);
  opacity:0;
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-bridgeType__move,
[data-mg="mg01"] .mg01-bridgeType__ment{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%,-50%,0);
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(78px, 16vmin, 232px);
  letter-spacing: -0.04em;
  color: rgba(12,12,18,.86);
  opacity:0;
  will-change: transform, opacity;
}

/* Moving ticker (pure text) */
[data-mg="mg01"] .mg01-bridgeTicker{
  position:absolute;
  left:0;
  right:0;
  bottom: 10vh;
  z-index:5;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

[data-mg="mg01"] .mg01-bridgeTicker__row{
  display:inline-block;
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 13px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(12,12,18,.14);
  opacity: .85;
  transform: translate3d(0,0,0);
  will-change: transform;
  padding-left: 6vw;
}


/* -------------------------------------------------------
   Handoff overlay (optional)
   - A second “act” that can start as the micro-type fades
   - Pure typography + thin rules (no glow / no light FX)
   ------------------------------------------------------- */

[data-mg="mg01"] .mg01-handoff{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:0;
  transform: translateZ(0);
  will-change: opacity;
}

/* -------------------------------------------------------
   Handoff — Slice Gate (v10)
   - No glow / no light FX
   - The next word is cut into slices that slide + lock
   ------------------------------------------------------- */

[data-mg="mg01"] .mg01-handoffSlices{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffSlice{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffSlice__txt{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%,-50%,0) scale(1.08) rotate(-8deg);
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(72px, 18vw, 240px);
  color: transparent;
  -webkit-text-stroke: var(--mg-handoff-gate-stroke, 2px) var(--mg-handoff-gate-stroke-ink, rgba(12,12,18,.26));
  opacity: 1;
  will-change: transform;
}

/* Registration marks: subtle, editorial framing */
[data-mg="mg01"] .mg01-handoffMarks{
  position:absolute;
  left:50%;
  top:50%;
  width: min(86vmin, 980px);
  height: min(54vmin, 560px);
  transform: translate3d(-50%,-50%,0) rotate(-8deg);
  z-index:2;
  pointer-events:none;
  opacity:0;
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffMark{
  position:absolute;
  width: 26px;
  height: 26px;
  opacity: .9;
}

[data-mg="mg01"] .mg01-handoffMark.mk-tl{ left: 0; top: 0; border-left: 1px solid rgba(12,12,18,.16); border-top: 1px solid rgba(12,12,18,.16); }
[data-mg="mg01"] .mg01-handoffMark.mk-tr{ right: 0; top: 0; border-right: 1px solid rgba(12,12,18,.16); border-top: 1px solid rgba(12,12,18,.16); }
[data-mg="mg01"] .mg01-handoffMark.mk-bl{ left: 0; bottom: 0; border-left: 1px solid rgba(12,12,18,.16); border-bottom: 1px solid rgba(12,12,18,.16); }
[data-mg="mg01"] .mg01-handoffMark.mk-br{ right: 0; bottom: 0; border-right: 1px solid rgba(12,12,18,.16); border-bottom: 1px solid rgba(12,12,18,.16); }

/* Side rails: micro-type, minimal + mechanical */
[data-mg="mg01"] .mg01-handoffRail{
  position:absolute;
  top:50%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transform: translate3d(0,-50%,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffRail.rail-left{
  left: 2.6vw;
  transform: translate3d(0,-50%,0) rotate(-90deg);
  transform-origin: 0% 50%;
}

[data-mg="mg01"] .mg01-handoffRail.rail-right{
  right: 2.6vw;
  transform: translate3d(0,-50%,0) rotate(90deg);
  transform-origin: 100% 50%;
}

[data-mg="mg01"] .mg01-handoffRail__row{
  position: relative;
  padding: 10px 0;
  white-space: nowrap;
  font-family: var(--mg-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mg-handoff-rail-spacing, .32em);
  font-size: var(--mg-handoff-rail-size, 11px);
  color: var(--mg-handoff-rail-ink, rgba(12,12,18,.62));
  transform: translate3d(0,0,0);
  will-change: transform;
}

[data-mg="mg01"] .mg01-handoffRail__row::after{
  content:"";
  position:absolute;
  left:-80vw;
  right:-80vw;
  top:50%;
  height:1px;
  background: var(--mg-handoff-rail-line, rgba(12,12,18,.10));
  opacity:.85;
  transform: translate3d(0,10px,0);
  pointer-events:none;
}

[data-mg="mg01"] .mg01-handoffBig{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mg-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(72px, 18vw, 240px);
  color: transparent;
  -webkit-text-stroke: var(--mg-handoff-gate-stroke, 2px) var(--mg-handoff-gate-stroke-ink, rgba(12,12,18,.26));
  opacity:0;
  transform: translate3d(0,0,0) scale(1.08);
  will-change: transform, opacity;
  pointer-events:none;
  z-index:0;
}


[data-mg="mg01"] .mg01-handoffBlock{
  position:absolute;
  z-index:1;
  left: 6vw;
  bottom: 12vh;
  display:flex;
  flex-direction:column;
  gap: 10px;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffKicker{
  font-family: var(--mg-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: 11px;
  color: rgba(12,12,18,.70);
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffTitle{
  font-family: var(--mg-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(30px, 4.2vw, 60px);
  color: rgba(12,12,18,.86);
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffRules{
  position:relative;
  width: min(46vw, 560px);
  height: min(22vh, 220px);
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

[data-mg="mg01"] .mg01-handoffRuleH,
[data-mg="mg01"] .mg01-handoffRuleV{
  position:absolute;
  left:0;
  top:0;
  background: rgba(12,12,18,.16);
}

[data-mg="mg01"] .mg01-handoffRuleH{
  height:1px;
  width:100%;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  will-change: transform;
}

[data-mg="mg01"] .mg01-handoffRuleV{
  width:1px;
  height:100%;
  transform: scaleY(0);
  transform-origin: 50% 0%;
  will-change: transform;
}

/* Optional type */
[data-mg="mg01"] .mg01-type{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(-50%, calc(-50% + 210px), 200px);
  text-align:center;
  z-index:6;
  opacity:0;
  will-change: transform, opacity;
  font-family: var(--mg-font);
}

[data-mg="mg01"] .mg01-type__tag{
  font-weight: 700;
  letter-spacing: .22em;
  font-size: 12px;
  opacity: .9;
}

[data-mg="mg01"] .mg01-type__sub{
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: .28em;
  font-size: 10px;
  opacity: .55;
}



/* Perf: avoid blend-modes inside the transformed card (Safari) */
[data-mg="mg01"].is-perf .mg01-card::before{ mix-blend-mode: normal; opacity: .40; }
[data-mg="mg01"].is-perf .mg01-layer.layer-2{ mix-blend-mode: normal; opacity: .08; }
[data-mg="mg01"].is-perf .mg01-layer.layer-3{ mix-blend-mode: normal; opacity: .28; }
[data-mg="mg01"].is-perf .mg01-glint{ mix-blend-mode: normal; }

/* Mobile scale tuning */
@media (max-width: 900px){
  [data-mg="mg01"]{ --mg-card-r: 22px; }
  [data-mg="mg01"] .mg01-portal{
    width: min(90vmin, 820px);
    height: min(90vmin, 820px);
  }
  [data-mg="mg01"] .mg01-dot{
    transform: translate3d(-50%,-50%,90px) scale(.7);
  }
}

/* Reduced motion fallback (keep it elegant, just static composition) */
@media (prefers-reduced-motion: reduce){
  [data-mg="mg01"] .mg01-dust{ display:none; }
  [data-mg="mg01"] .mg01-portal{ opacity: .65; transform: translate3d(-50%,-50%,0) scale(.92); }
  [data-mg="mg01"] .mg01-cardWrap{ opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
  [data-mg="mg01"] .mg01-dot{ opacity: .85; transform: translate3d(-50%,-50%,0) scale(1); }
  [data-mg="mg01"] .mg01-type{ opacity: .75; }
  [data-mg="mg01"] .mg01-idleBands{ display:none; }
  [data-mg="mg01"] .mg01-cardCue__arrow{ animation: none !important; }
}

/* ============================
   Back face must win (Fix)
   ============================ */

/* まずは素直に：背面から見たとき表用レイヤーは描かない */
[data-mg="mg01"] .mg01-layer,
[data-mg="mg01"] .mg01-glint,
[data-mg="mg01"] .mg01-dot{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Safari/実装差の保険：JSが is-back を付けたら強制的に表レイヤーを消す */
[data-mg="mg01"].is-back .mg01-layer,
[data-mg="mg01"].is-back .mg01-glint,
[data-mg="mg01"].is-back .mg01-dot{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 裏面ロゴは最大濃度・確実表示（JSの切替と二重でもOK） */
[data-mg="mg01"].is-back .mg01-logo--back{
  opacity: 1 !important;
  visibility: visible !important;
}

/* 表の鏡文字は裏面では消す（保険） */
[data-mg="mg01"].is-back .mg01-logo--front{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Safari: some builds fail to paint a 180deg-rotated face when
   backface-visibility is hidden (even if JS toggles visibility).
   We already do explicit face switching in JS, so allow painting. */
[data-mg="mg01"].is-safari .mg01-logo--back{
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* Center word (simple / editorial) */
[data-mg="mg01"] .mg01-centerWord{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  z-index: 5;
  pointer-events: none;

  font-family: var(--mg-font);
  font-weight: 600;
  font-size: clamp(26px, 6.2vmin, 72px);
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(12,12,18,.48);
  opacity: 0; /* 初期表示はGSAPで出す（ズレ防止） */
  will-change: transform, opacity, letter-spacing;
}