/* ============================================
   春凪島 — Animations
   ============================================ */

/* ===== ベース ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .ken-burns img { transform: none !important; }
}

/* ===== Ken Burns (写真をゆっくり拡大しながらパン) ===== */
.ken-burns {
  overflow: hidden;
}
.ken-burns img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--kb-origin, 50% 50%);
  animation: kenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
.ken-burns--slow img { animation-duration: 32s; }
.ken-burns--left { --kb-origin: 30% 50%; }
.ken-burns--right { --kb-origin: 70% 50%; }
.ken-burns--top { --kb-origin: 50% 30%; }
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -0.5%); }
}

/* ===== Reveal: スクロールイン (より滑らか) ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal--up { transform: translateY(40px); }
.reveal--right { transform: translateX(-40px); }
.reveal--left { transform: translateX(40px); }
.reveal--scale { transform: scale(0.92); }
.reveal--clip { clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1); }
.reveal--clip.in { clip-path: inset(0 0 0 0); opacity: 1; }

/* 連鎖遅延 */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

/* ===== Hero テキスト連続フェード ===== */
.hero__season,
.hero__title,
.hero__lead,
.hero__actions {
  opacity: 0;
  transform: translateY(28px);
  animation: heroIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* SCROLL指標は中央寄せ(translateX(-50%))を維持したまま登場させる。
   共通heroInの transform:none だと中央化が外れてスマホでズレるため専用に分離。 */
.hero__scroll {
  opacity: 0;
  transform: translate(-50%, 28px);
  animation: heroInScroll 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroInScroll {
  to { opacity: 1; transform: translate(-50%, 0); }
}
.hero__season { animation-delay: 0.2s; }
.hero__title { animation-delay: 0.45s; }
.hero__lead { animation-delay: 0.7s; }
.hero__actions { animation-delay: 0.95s; }
.hero__scroll { animation-delay: 1.4s; }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
.hero__scroll {
  animation-fill-mode: forwards;
}
.hero__scroll.in-after {
  opacity: 0.7;
}

/* ===== 画像カードのホバー Zoom ===== */
.zoom-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.zoom-wrap img,
.zoom-wrap .zoom-target {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  will-change: transform;
}
.zoom-wrap:hover img,
.zoom-wrap:hover .zoom-target {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1.02);
}

/* カードホバーの淡い境界グロー */
.glow-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.glow-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px -22px rgba(29, 94, 159, 0.32),
              0 8px 18px -8px rgba(36, 36, 48, 0.18);
}

/* ===== 鬼灯（ほおずき）・落下＋明滅 ===== */
.petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.petal {
  position: absolute;
  top: -24px;
  width: 18px;
  height: 23px;
  /* 鬼灯(ほおずき) — 提灯型SVG */
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NCA1NiI+PHBhdGggZD0iTTIyIDlDOSA5IDUgMjIgOCAzNWMyIDEwIDE0IDE5IDE0IDE5czEyLTkgMTQtMTljMy0xMy0xLTI2LTE0LTI2eiIgZmlsbD0iI2VlNmEyYyIvPjxlbGxpcHNlIGN4PSIxNiIgY3k9IjIxIiByeD0iNC41IiByeT0iOCIgZmlsbD0iI2Y2OTk1YiIgb3BhY2l0eT0iMC41NSIvPjxwYXRoIGQ9Ik0yMiA5QzkgOSA1IDIyIDggMzVjMiAxMCAxNCAxOSAxNCAxOXMxMi05IDE0LTE5YzMtMTMtMS0yNi0xNC0yNnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NmNTAxYyIgc3Ryb2tlLXdpZHRoPSIxLjQiLz48cGF0aCBkPSJNMjIgMTF2NDIiIHN0cm9rZT0iI2NmNTAxYyIgc3Ryb2tlLXdpZHRoPSIxLjEiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIgMTVDOCAyNiAxMSA0MCAxOSA1MiIgc3Ryb2tlPSIjY2Y1MDFjIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMzIgMTVDMzYgMjYgMzMgNDAgMjUgNTIiIHN0cm9rZT0iI2NmNTAxYyIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTIyIDlDMTggNiAxNCA1IDExIDciIHN0cm9rZT0iIzZmOGY0NCIgc3Ryb2tlLXdpZHRoPSIyLjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMiA5YzQtMyA4LTQgMTEtMiIgc3Ryb2tlPSIjNmY4ZjQ0IiBzdHJva2Utd2lkdGg9IjIuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTIyIDljLTEtNSAxLTggNC03IiBzdHJva2U9IiM1ZTdkM2EiIHN0cm9rZS13aWR0aD0iMi4yIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4K") center / contain no-repeat;
  opacity: 0;
  /* 落下 + glow明滅 の2アニメ同時 */
  animation: petalFall var(--dur, 14s) linear infinite, hoozukiGlow 2.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes hoozukiGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(244,120,47,0.5)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255,150,70,0.9)); }
}
@keyframes petalFall {
  /* --scale を transform に含める。keyframes 側で transform を書く以上、
     要素の inline transform は無視されるため、拡大はここを通すしかない。 */
  0% {
    opacity: 0;
    transform: translate(0, -30px) rotate(0deg) scale(var(--scale, 1));
  }
  8% { opacity: 0.85; }
  100% {
    opacity: 0;
    transform: translate(var(--drift, 80px), 110vh) rotate(var(--spin, 720deg)) scale(var(--scale, 1));
  }
}

/* ===== 灯火の明滅 ===== */
.lantern-flicker {
  animation: lanternFlicker 4s ease-in-out infinite;
}
@keyframes lanternFlicker {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(217, 162, 40, 0.5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(217, 162, 40, 0.85)); }
}

/* ===== カテゴリーアイコンの跳ね ===== */
.category-grid__icon {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease;
}
.category-grid__item:hover .category-grid__icon {
  transform: translateY(-4px) scale(1.08);
}

/* ===== タグチップのスタガード hover ===== */
.tag-chip {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.tag-chip:hover {
  transform: translateY(-3px) scale(1.04);
}

/* ===== Promo Band グラデの流れ ===== */
.promo-band {
  background:
    linear-gradient(135deg, #1d5e9f 0%, #143f6c 40%, #1d5e9f 100%);
  background-size: 200% 200%;
  animation: promoFlow 15s ease-in-out infinite alternate;
}
@keyframes promoFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ===== Tilt 風: マウスに反応する微カード ===== */
.tilt {
  transition: transform 0.18s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ===== ヘッダーのCTAパルス ===== */
.head-tools__cta {
  position: relative;
}
.head-tools__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c-shu);
  opacity: 0.45;
  animation: ctaPulse 2.8s ease-out infinite;
  z-index: -1;
}
@keyframes ctaPulse {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ===== ボタンのリップル風 ===== */
.btn, .more-link {
  position: relative;
  overflow: hidden;
}
.btn::after, .more-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.35) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.btn:hover::after, .more-link:hover::after { opacity: 1; }

/* ===== Section Head 線の伸長 ===== */
.section-head__deco {
  width: 0;
  background: var(--c-sea);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  height: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 14px;
}
.section-head.in .section-head__deco { width: 40px; }

/* ===== News Row hover sliding line ===== */
.news-row { position: relative; }
.news-row::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--c-sea);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.news-row:hover::before { width: 100%; }
.news-row__more {
  transition: transform 0.3s ease, color 0.3s ease;
}
.news-row:hover .news-row__more {
  transform: translateX(6px);
  color: var(--c-sea);
}

/* ===== 画像内ラベル (course/feature) アンダーバー ===== */
.course-card__no, .feature-card__tag {
  position: relative;
  overflow: hidden;
}
.course-card__no::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
  background: var(--c-sea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.7,0,0.2,1);
  z-index: -1;
}
.course-card:hover .course-card__no::after { transform: scaleX(1); }

/* ===== Floating background 太陽光線 ===== */
.sun-rays {
  position: absolute;
  pointer-events: none;
  width: 280px; height: 280px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(252, 236, 209, 0.4) 0deg,
      rgba(252, 236, 209, 0) 8deg,
      rgba(252, 236, 209, 0.4) 16deg,
      rgba(252, 236, 209, 0) 24deg,
      rgba(252, 236, 209, 0.4) 32deg,
      rgba(252, 236, 209, 0) 40deg);
  animation: sunRays 30s linear infinite;
  filter: blur(8px);
  opacity: 0.5;
}
@keyframes sunRays {
  to { transform: rotate(360deg); }
}

/* ===== 矢印アイコンのループ ===== */
.btn:hover .btn__arrow {
  animation: arrowSlide 0.9s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}
@keyframes arrowSlide {
  0% { transform: translateX(0); }
  45% { transform: translateX(8px); opacity: 1; }
  55% { transform: translateX(-8px); opacity: 0; }
  56% { transform: translateX(-8px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ===== Course card 画像のサブ・パン ===== */
.course-card__image .ken-burns img { animation-duration: 26s; }

/* ===== Marquee (tag chip流れ) — オプション ===== */
.marquee {
  display: flex;
  gap: 12px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 12px;
  animation: marqueeMove 38s linear infinite;
}
@keyframes marqueeMove {
  to { transform: translateX(-50%); }
}
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

/* ===== Numbers count up (Cosmetic only) ===== */
.count-up { display: inline-block; }

/* ===== Spot Search input focus ===== */
.spot-search__box {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.spot-search__box:focus-within {
  box-shadow: 0 12px 36px -12px rgba(29,94,159,0.32);
  transform: translateY(-2px);
}

/* ===== ホバー時のクロスフェード (二重imageラップ用) ===== */
.fade-stack {
  position: relative;
  overflow: hidden;
}
.fade-stack img {
  transition: opacity 0.7s ease;
}
.fade-stack img.is-back {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fade-stack:hover img.is-front { opacity: 0; }
.fade-stack:hover img.is-back { opacity: 1; }

/* ===== Sticky element ease-in ===== */
.site-header {
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}

/* ===== 浮き島カテゴリーの登場 ===== */
.category-band {
  opacity: 0;
  transform: translateY(40px);
  animation: catBandIn 1s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
}
@keyframes catBandIn {
  to { opacity: 1; transform: none; }
}

/* ===== ピクセルドットの伏せ字（アクセス情報 / 行18 → 2026-10-26 改修） =====
   手本: ビラで使ったヤシロの目隠しノイズ（marketing/steam_library_20261020/yashiro の vivid_a）。
   白〜淡い灰の□のモザイクで隠し、縁は段々で不ぞろい、縁に沿って濃いシアン・ピンク・黄などの
   横長の棒と、帯から離れて漂う小さな粒。黒は縁沿いの細い棒だけ。
   絵は assets/images/redact-mosaic.svg（120x30 を横に繰り返す。乱数の種を固定した計算で作った。生成AIは不使用）。
   SVG の芯（上下 6〜24）が要素の高さに重なるよう、::before を上下に 1/3 ずつはみ出させる。 */
.noise-redact {
  position: relative;
  display: inline-block;
  color: transparent;
  user-select: none;
  white-space: nowrap;
  padding: 0 3px;
  line-height: 1.1;
}
.noise-redact::before {
  content: "";
  position: absolute;
  top: -33.334%;
  bottom: -33.334%;
  left: -.18em;
  right: -.18em;
  pointer-events: none;
  background: url("../images/redact-mosaic.svg") repeat-x;
  background-size: auto 100%;
  /* 同じ並びが続いて見えないよう、要素ごとに始まりをずらす（--redact-x はページ側で足せる） */
  background-position: calc(var(--redact-x, 0%) + var(--redact-n, 0%)) 50%;
  /* RGB のずれ（ピンクとシアンが左右にわずかにはみ出す） */
  filter: drop-shadow(.06em 0 0 rgba(255, 40, 200, .35)) drop-shadow(-.06em 0 0 rgba(0, 176, 255, .35));
  /* 左右の端も段々に（帯の芯＝上下 20〜80% の範囲は要素の幅を必ず覆う） */
  clip-path: polygon(
    .32em 0, calc(100% - .26em) 0, calc(100% - .26em) 16%, calc(100% - .06em) 16%,
    calc(100% - .06em) 38%, 100% 38%, 100% 57%, calc(100% - .12em) 57%,
    calc(100% - .12em) 78%, calc(100% - .02em) 78%, calc(100% - .02em) 86%, calc(100% - .3em) 86%,
    calc(100% - .3em) 100%, .22em 100%, .22em 88%, .04em 88%,
    .04em 66%, .14em 66%, .14em 45%, 0 45%,
    0 24%, .1em 24%, .1em 12%, .32em 12%
  );
}
.noise-redact:nth-of-type(2n) { --redact-n: 37%; }
.noise-redact:nth-of-type(3n) { --redact-n: 71%; }


/* シート行11(0818): 降ってくる鬼灯をタップで拾えるようにする。
   .petals 自体は pointer-events:none なので、粒だけ受け取る。 */
.petal--catchable { pointer-events: auto; cursor: pointer; }
@media (hover: hover) {
  .petal--catchable:hover { filter: drop-shadow(0 0 10px rgba(255, 170, 90, 1)); }
}