/* GÜGU layered illustration — animation only.
   Scoped under .gugu-layers so it cannot leak into the rest of the page. */

.gugu-layers {
  display: flex;
  justify-content: center;
}

.gugu-layers__stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1400 / 1150;
}

/* Outer node = one-shot entrance. Inner node = infinite float.
   Both are paused until the stage gets --play: running (set on scroll-in). */
.gugu-layers__layer {
  position: absolute;
  animation-play-state: var(--play, paused);
}

.gugu-layers__float {
  animation-play-state: var(--play, paused);
  will-change: transform;
}

.gugu-layers__img,
.gugu-layers__svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gugu-layers__svg {
  overflow: visible;
}

/* ---- entrance ----
   The four goods fly OUTWARD: each `from` sits inboard of the measured
   position, so they get flung away from GÜGU rather than drifting in.
   The gl-in-tl / tr / r / l names still describe the corner each layer lives
   in — not the direction of travel — because index.html keys off them via
   data-enter. GÜGU (c) and the fade-only marks are unchanged. */
.gugu-layers__layer[data-enter="c"]  { animation: gl-in-c 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gugu-layers__layer[data-enter="tl"] { animation: gl-in-tl 950ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gugu-layers__layer[data-enter="tr"] { animation: gl-in-tr 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gugu-layers__layer[data-enter="r"]  { animation: gl-in-r 1050ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gugu-layers__layer[data-enter="l"]  { animation: gl-in-l 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gugu-layers__layer[data-enter="fade"] { animation: gl-in-fade 900ms linear both; }

@keyframes gl-in-c    { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes gl-in-tl   { from { opacity: 0; transform: translate(18px, 16px); } to { opacity: 1; transform: none; } }
@keyframes gl-in-tr   { from { opacity: 0; transform: translate(-16px, 18px); } to { opacity: 1; transform: none; } }
@keyframes gl-in-r    { from { opacity: 0; transform: translate(-20px, 9px); } to { opacity: 1; transform: none; } }
@keyframes gl-in-l    { from { opacity: 0; transform: translate(20px, -11px); } to { opacity: 1; transform: none; } }
@keyframes gl-in-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- idle float (max travel 8px, deliberately mismatched durations) ---- */
.gugu-layers__float[data-float="gugu"]  { animation: gl-gugu 4.1s ease-in-out infinite; }
.gugu-layers__float[data-float="x"]     { animation: gl-x 4.2s ease-in-out infinite; }
.gugu-layers__float[data-float="buzz"]  { animation: gl-buzz 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

@keyframes gl-gugu  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes gl-x     { 0%, 100% { opacity: 0.68; transform: scale(0.975); } 50% { opacity: 1; transform: scale(1); } }

/* ---- goods: drift away and fade out, on a loop ----
   Replaces the idle sway for the four physical objects. Each one waits at its
   measured position, then travels ~40px along the SAME line as its entrance
   (the reverse of the `from` in gl-in-tl/tr/r/l), fading out as it goes — GÜGU
   keeps brushing them away. It then snaps back to rest while fully transparent
   and fades in again, so the reset is never seen.
   The 78% -> 79% jump is the invisible reset; keep opacity at 0 across it.
   Durations stay deliberately mismatched, and the per-element animation-delay
   in index.html spreads the four out so they never fly off together.

   Each object's motion line (arrow-*) rides the same animation as the object it
   belongs to, so the pair travels and fades as one. Pair the duration here and
   the animation-delay in index.html — if the two drift apart, the line detaches
   from its object. --fling-op keeps the lines at their lighter resting opacity. */
.gugu-layers__float[data-float="tape"],
.gugu-layers__float[data-float="arrow-tape"]  { animation: gl-fling-tape 6.7s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.gugu-layers__float[data-float="mouth"],
.gugu-layers__float[data-float="arrow-mouth"] { animation: gl-fling-mouth 5.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.gugu-layers__float[data-float="clip"],
.gugu-layers__float[data-float="arrow-clip"]  { animation: gl-fling-clip 6.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.gugu-layers__float[data-float="band"],
.gugu-layers__float[data-float="arrow-band"]  { animation: gl-fling-band 6.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

.gugu-layers__float[data-float^="arrow-"] { --fling-op: 0.6; }

@keyframes gl-fling-tape {
  0%, 20% { opacity: var(--fling-op, 1); transform: translate(0, 0); }
  62%     { opacity: calc(var(--fling-op, 1) * 0.55); transform: translate(-18px, -16px); }
  78%     { opacity: 0; transform: translate(-30px, -27px); }
  79%, 92% { opacity: 0; transform: translate(0, 0); }
  100%    { opacity: var(--fling-op, 1); transform: translate(0, 0); }
}
@keyframes gl-fling-mouth {
  0%, 20% { opacity: var(--fling-op, 1); transform: translate(0, 0); }
  62%     { opacity: calc(var(--fling-op, 1) * 0.55); transform: translate(16px, -18px); }
  78%     { opacity: 0; transform: translate(27px, -30px); }
  79%, 92% { opacity: 0; transform: translate(0, 0); }
  100%    { opacity: var(--fling-op, 1); transform: translate(0, 0); }
}
@keyframes gl-fling-clip {
  0%, 20% { opacity: var(--fling-op, 1); transform: translate(0, 0); }
  62%     { opacity: calc(var(--fling-op, 1) * 0.55); transform: translate(22px, -10px); }
  78%     { opacity: 0; transform: translate(36px, -16px); }
  79%, 92% { opacity: 0; transform: translate(0, 0); }
  100%    { opacity: var(--fling-op, 1); transform: translate(0, 0); }
}
@keyframes gl-fling-band {
  0%, 20% { opacity: var(--fling-op, 1); transform: translate(0, 0); }
  62%     { opacity: calc(var(--fling-op, 1) * 0.55); transform: translate(-21px, 12px); }
  78%     { opacity: 0; transform: translate(-35px, 19px); }
  79%, 92% { opacity: 0; transform: translate(0, 0); }
  100%    { opacity: var(--fling-op, 1); transform: translate(0, 0); }
}
@keyframes gl-buzz {
  0%, 86%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  89% { transform: translate(1.5px, -1.5px) scale(1.05); opacity: 1; }
  92% { transform: translate(-1px, 1px) scale(1.02); opacity: 1; }
  95% { transform: translate(1px, -1px) scale(1.04); opacity: 1; }
}

/* Re-assert the pause AFTER the rules above.
   `animation: ...` is a shorthand, so every one of those rules resets
   animation-play-state back to `running` and cancels the pause declared at the
   top of this file — the whole illustration would then play through on page
   load, and be finished before the visitor scrolls down to it. These selectors
   are more specific than the shorthand rules, so the pause sticks until
   js/main.js sets --play: running on scroll-in. */
.gugu-layers__layer[data-enter],
.gugu-layers__float[data-float] { animation-play-state: var(--play, paused); }

@media (prefers-reduced-motion: reduce) {
  .gugu-layers__layer { animation: gl-in-fade 400ms linear both !important; }
  .gugu-layers__float { animation: none !important; }
  .gugu-layers__layer[data-enter] { animation-play-state: var(--play, paused) !important; }
}

/* ==========================================================================
   Integration with this site (07 いつものデバイスで)
   ========================================================================== */

/* `.device-figure img` (style.css) is more specific than `.gugu-layers__img`
   and would pin every layer to 260px, destroying the composition. */
.device-figure .gugu-layers__img { width: 100%; height: auto; margin-inline: 0; }

/* Keep the illustration at exactly the size the flat image had. */
.device-figure .gugu-layers__stage { width: 260px; }

@media (min-width: 900px) {
  .device-figure .gugu-layers__stage { width: 100%; }
}

/* Animations stay paused until main.js sets --play, so without JS the
   entrance animation would hold its 0% frame (opacity: 0) and the whole
   illustration would be invisible. Show it as a flat picture instead. */
.no-js .gugu-layers__layer,
.no-js .gugu-layers__float { animation: none !important; opacity: 1 !important; }