/* ============================================================
   NEVYRA — parallax.css v2
   Animated blur-glow orbs, parallax, reveals
   ============================================================ */

/* ── Orb base: blurred glowing blobs ── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Three drifting ambient orbs per section */
.orb--a {
  background: radial-gradient(circle at 40% 40%, var(--orb-a), transparent 68%);
  filter: blur(72px);
  animation: orbDrift1 22s ease-in-out infinite alternate;
}
.orb--b {
  background: radial-gradient(circle at 55% 55%, var(--orb-b), transparent 68%);
  filter: blur(90px);
  animation: orbDrift2 28s ease-in-out infinite alternate;
}
.orb--c {
  background: radial-gradient(circle at 50% 50%, var(--orb-c), transparent 68%);
  filter: blur(60px);
  animation: orbDrift3 18s ease-in-out infinite alternate;
}
/* Legacy compat */
.orb--accent { background: radial-gradient(circle, var(--orb-a), transparent 70%); filter: blur(72px); animation: orbDrift1 22s ease-in-out infinite alternate; }
.orb--white  { background: radial-gradient(circle, rgba(255,255,255,0.04), transparent 70%); filter: blur(60px); animation: orbDrift2 18s ease-in-out infinite alternate; }

/* Pulsing hero glow orb */
.orb--glow {
  background: radial-gradient(circle, var(--color-accent-glow), transparent 60%);
  filter: blur(100px);
  animation: orbPulse 10s ease-in-out infinite;
}

/* Mouse-follow orb */
.orb--follow {
  width: 500px; height: 500px;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,196,255,0.10), transparent 65%);
  filter: blur(70px);
  z-index: 0;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}
[data-theme="light"] .orb--follow {
  background: radial-gradient(circle, rgba(0,148,204,0.06), transparent 65%);
}

@keyframes orbDrift1 {
  0%   { transform: translate(0px, 0px) scale(1.00); }
  25%  { transform: translate(55px, -35px) scale(1.07); }
  60%  { transform: translate(-25px, 50px) scale(0.94); }
  100% { transform: translate(35px, 22px) scale(1.04); }
}
@keyframes orbDrift2 {
  0%   { transform: translate(0px, 0px) scale(1.00); }
  30%  { transform: translate(-65px, 55px) scale(1.11); }
  65%  { transform: translate(48px, -28px) scale(0.91); }
  100% { transform: translate(-18px, -48px) scale(1.06); }
}
@keyframes orbDrift3 {
  0%   { transform: translate(0px, 0px) scale(1.00); }
  40%  { transform: translate(70px, -65px) scale(1.14); }
  80%  { transform: translate(-30px, 40px) scale(0.88); }
  100% { transform: translate(20px, 30px) scale(1.02); }
}
@keyframes orbPulse {
  0%, 100% { opacity: 0.55; transform: scale(1.00); filter: blur(100px); }
  50%       { opacity: 1.00; transform: scale(1.14); filter: blur(80px); }
}

/* ── Hero BG: animated gradient mesh ── */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%,  rgba(0,196,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 95% 75%,  rgba(80,80,220,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 5%  80%,  rgba(0,196,255,0.07) 0%, transparent 60%);
  animation: heroBgBreath 24s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
[data-theme="light"] .hero__bg {
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%,  rgba(0,148,204,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 95% 75%,  rgba(80,100,220,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 5%  80%,  rgba(0,148,204,0.09) 0%, transparent 60%);
}
@keyframes heroBgBreath {
  0%   { opacity: 0.75; transform: scale(1.000) translateY(  0px); }
  50%  { opacity: 1.00; transform: scale(1.025) translateY(-12px); }
  100% { opacity: 0.85; transform: scale(1.010) translateY(  6px); }
}

/* Grid overlay */
.hero__grid-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 78%);
  animation: gridScroll 50s linear infinite;
}
[data-theme="light"] .hero__grid-overlay {
  background-image:
    linear-gradient(rgba(0,60,180,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,60,180,0.04) 1px, transparent 1px);
}
@keyframes gridScroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 80px 80px, 80px 80px; }
}

/* ── Section ambient glow (added via JS or inline) ── */
.section-ambient {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}

/* ── Reveal / Scroll Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity  var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
}
.reveal.visible          { opacity: 1; transform: none; }
.reveal--left            { transform: translateX(-38px); }
.reveal--left.visible    { transform: none; }
.reveal--right           { transform: translateX(38px); }
.reveal--right.visible   { transform: none; }
.reveal--scale           { transform: scale(0.92); }
.reveal--scale.visible   { transform: none; }
.reveal-delay-1 { transition-delay:  80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* ── Floating ── */
.float { animation: floatY 7s ease-in-out infinite; }
.float--slow  { animation-duration: 11s; }
.float--fast  { animation-duration: 4.5s; }
.float--delay-1 { animation-delay: -3s; }
.float--delay-2 { animation-delay: -5.5s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}

/* ── Parallax wrapper ── */
.parallax-wrapper { position: relative; overflow: hidden; }
[data-parallax]   { will-change: transform; }

/* ── Canvas (particle bg) ── */
#hero-canvas {
  position: absolute; inset: 0;
  opacity: 0.4; pointer-events: none;
}

/* ── Typed cursor ── */
.typed-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--color-accent); margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.85s step-end infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ── Animated border ── */
.border-anim { position: relative; }
.border-anim::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), transparent 40%, var(--color-accent-2), transparent 80%, var(--color-accent));
  background-size: 300% 100%;
  animation: borderFlow 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
@keyframes borderFlow {
  from { background-position: 0% center; }
  to   { background-position: 300% center; }
}

/* ══════════════════════════════════════════════════
   MARQUEE — 2行・JS制御版
   シームレスループはJSがcloneして実現
   CSS animationは一切使わない（JS rAFで制御）
   ══════════════════════════════════════════════════ */
.marquee-section {
  overflow: hidden;
}

.marquee-wrapper {
  overflow: hidden;
  position: relative;
  padding-block: 2px; /* clip 対策 */
}

/* フェードエッジ */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 100px; z-index: 1; pointer-events: none;
}
.marquee-wrapper::before { left: 0;  background: linear-gradient(90deg, var(--color-base), transparent); }
.marquee-wrapper::after  { right: 0; background: linear-gradient(-90deg, var(--color-base), transparent); }
[data-theme="light"] .marquee-wrapper::before { background: linear-gradient(90deg, var(--color-base), transparent); }
[data-theme="light"] .marquee-wrapper::after  { background: linear-gradient(-90deg, var(--color-base), transparent); }

/* track: CSS animation でシームレスループ
   HTML側で [orig-set][clone-set] の2セット構成にすること。
   translateX(-50%) でちょうど1セット分移動 → 瞬間リセット */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track--ltr {
  animation: marquee-ltr 55s linear infinite;
}
.marquee-track--rtl {
  animation: marquee-rtl 55s linear infinite;
}

/* hover または data-paused 属性で停止 */
.marquee-wrapper:hover .marquee-track,
.marquee-wrapper[data-paused] .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* アイテム */
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--space-3);
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--color-text-muted);
  padding-block: var(--space-3);
  padding-inline: var(--space-8);
  user-select: none;
}

/* 2行目は少し大きく・明るく（視覚的差別化） */
.marquee-item--alt {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marquee-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent); flex-shrink: 0;
}
.marquee-item--alt .marquee-dot {
  background: rgba(0,196,255,0.45);
}

/* ── Scroll Indicator — v1 style, section bottom center ── */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  animation: scrollBounce 2s ease infinite;
  z-index: 2;
  pointer-events: none;  /* ホバー状態を回避 */
  user-select: none;
}
.scroll-indicator__line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Scroll progress ── */
.section-progress {
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ── Number rollup ── */
@keyframes rollup {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.roll-in { animation: rollup 0.6s var(--ease-spring) both; }

/* (section parallax dividers removed) */