/* Extracted from the Studio.Design export. Cascade order preserved. */
/* IDが"float-img-"で始まる全ての要素にアニメーションを適用

   Was img[id^="float-img-"], which never matched anything: Studio renders these
   as <div id="float-img-N" class="image sd"> and paints the artwork on a
   :before, so there is no <img> to select. The animation was therefore dead --
   including on the original ai-interview.zcareer.com, which ships this same
   rule.

   The div fills its overflow:hidden frame exactly, so a bare translateY would
   crop one edge and open a gap at the other. The keyframes carry a constant
   scale to bleed the artwork past the frame and keep it covered for the whole
   loop. The English caption is a sibling rather than a child, so it correctly
   stays put while the artwork drifts behind it. */
  [id^="float-img-"] {
    /* アニメーション名、時間、タイミング関数、ループ */
    animation: floating 6s ease-in-out infinite;
    will-change: transform;
  }

  /* 浮遊アニメーションの定義。scale(1.14) は見切れ防止のブリード。 */
  @keyframes floating {
    0% {
      transform: translateY(0px) rotate(0deg) scale(1.14);
    }
    50% {
      /* 上に12px移動し、わずかに回転 */
      transform: translateY(-12px) rotate(0.6deg) scale(1.14);
    }
    100% {
      transform: translateY(0px) rotate(0deg) scale(1.14);
    }
  }

  /* 複数の要素の動きをずらす。実際のIDは15〜19（元は1〜4を想定していた） */
  #float-img-15 {
    animation-delay: 0s;
  }
  #float-img-16 {
    animation-delay: -1.5s; /* マイナス値でアニメーションを前倒し */
  }
  #float-img-17 {
    animation-delay: -3s;
  }
  #float-img-18 {
    animation-delay: -4.5s;
  }
  #float-img-19 {
    animation-delay: -2s;
  }

  /* 3つの特徴のカードとFAQの2枚：中央から小さく縮んだ状態から原寸へ、ぼかしの
     グラデーションを伴って出現。

     The reveal itself is Studio's own, not hand-rolled. studio.css already
     ships the start state for all five frames --

       .appear { scale: .1 .1; filter: blur(51px); opacity: 0;
                 border-radius: 128px }

     -- transitioning to the resting state (240x240, radius 32px, opacity .9 on
     the 3つの特徴 three) over 800ms with a 200 / 500 / 800ms stagger. The two
     FAQ frames, 採用担当者さま向け and 候補者さま向け, use the same start state
     over 1600ms at 0 / 300ms. `scale` has no transform-origin of its own and
     defaults to the box centre, which is what makes the card grow outward from
     its middle.

     The export just never put the `appear` class on the frames, so the rule
     matched nothing and the cards sat static. index.html now carries the class
     and the .appear pass in scripts/main.js swaps it for .appear-active on
     scroll, exactly as it does for every other block on the page. The two FAQ
     frames were additionally commented out in the markup; they are live again.

     scale rather than transform is also the only option here: `floating` above
     animates transform on an infinite loop, and a running animation beats a
     normal declaration, so a transform-based reveal would never render -- the
     same dead-rule trap described at the top of this file. The standalone
     `scale` property composes with the animation's transform instead of losing
     to it.

     Nothing to declare for the reveal itself; studio.css owns it. The only
     addition is the reduced-motion opt-out below. */

  @media (prefers-reduced-motion: reduce) {
    [id^="float-img-"] {
      animation: none;
    }

    /* Keep the fade -- it carries no motion -- but drop the zoom, the blur and
       the radius morph, which do.

       :has() rather than the frames' data-s-* UUIDs, which are regenerated on
       every fresh Studio export. The id inside :has() also lifts specificity to
       (1,2,0), above studio.css's .sd[data-s-*].appear at (0,3,0) -- necessary
       because studio.css loads after this file. */
    .sd.appear:has(> #float-img-15),
    .sd.appear:has(> #float-img-16),
    .sd.appear:has(> #float-img-17),
    .sd.appear:has(> #float-img-18),
    .sd.appear:has(> #float-img-19) {
      scale: 1;
      filter: none;
    }

    /* border-radius has to be restated rather than left to the base rule --
       .appear sets 128px and this block outranks it. The two groups rest at
       different values, so they are pinned separately. */
    .sd.appear:has(> #float-img-15),
    .sd.appear:has(> #float-img-16),
    .sd.appear:has(> #float-img-17) {
      border-radius: 32px;
    }
    .sd.appear:has(> #float-img-18),
    .sd.appear:has(> #float-img-19) {
      border-radius: 16px;
    }
  }

main{display:contents}