/* ===== Animation system — IT cutting-edge vibe ============================= */
/* Easing curves transcribed from the source motion/react config:
   EASE_SHARP  = [0.25, 0.46, 0.45, 0.94]  — sharp / clean
   EASE_BOUNCE = [0.34, 1.28, 0.64, 1]     — slight overshoot                */
:root {
  --ease-sharp:  cubic-bezier(.25,.46,.45,.94);
  --ease-bounce: cubic-bezier(.34,1.28,.64,1);
  --ease-out:    cubic-bezier(.25,.46,.45,.94);
  --ease-snap:   cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }

/* ── Page enter ─────────────────────────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageIn .6s var(--ease-sharp) both; }

/* ── Scroll reveal (toggled by IntersectionObserver) ────────────────────── *
   Translations match source: scrollUp(y36), scrollLeft(x-48), scrollRight(x48)
   scrollScale: scale .88 + y24, duration .65, EASE_BOUNCE                    */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity .75s var(--ease-sharp),
    transform .75s var(--ease-sharp);
  will-change: opacity, transform;
}
.reveal       { transform: translateY(36px); }
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }

.reveal-scale {
  opacity: 0;
  transform: translateY(24px) scale(.88);
  transition:
    opacity .65s var(--ease-bounce),
    transform .65s var(--ease-bounce);
}

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger delays (0.10 / 0.15 steps to match source) */
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }
.delay-5 { transition-delay: .50s; }
.delay-6 { transition-delay: .60s; }

/* ── Hero title: bottom-clip mask reveal (source: clipPath inset 0→100%) ── */
@keyframes heroClip {
  from { opacity: 0; transform: translateY(60px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0% 0); }
}
.hero-clip { animation: heroClip .9s var(--ease-sharp) both; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-1 { animation: heroFadeUp .7s var(--ease-sharp) both .35s; }
.hero-fade-2 { animation: heroFadeUp .8s var(--ease-sharp) both .55s; }

/* ── Buttons: shine sweep + lift ────────────────────────────────────────── */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease-sharp), box-shadow .25s var(--ease-sharp);
}
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease-snap);
  pointer-events: none;
}
.btn-shine:hover::after { transform: translateX(130%); }
.btn-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37,66,107,.18);
}
.btn-shine:active { transform: translateY(0) scale(.98); }

/* Pulse ring around yellow CTAs */
.pulse-zone { position: relative; border-radius: 12px; }
.pulse-zone::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(243,203,0,.55);
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(243,203,0,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(243,203,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(243,203,0,0); }
}

/* ── Cards: lift + ring on hover (matches whileHover y:-6 + shadow boost) ─ */
.glow-card {
  position: relative;
  transition:
    transform .25s var(--ease-sharp),
    box-shadow .25s var(--ease-sharp);
}
.glow-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,66,107,0);
  transition: box-shadow .25s var(--ease-sharp);
}
.glow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(37,66,107,.40);
}
.glow-card:hover::before {
  box-shadow: 0 0 0 2px rgba(37,66,107,.22);
}
.glow-card img { transition: transform .8s var(--ease-sharp); }
.glow-card:hover img { transform: scale(1.06); }

/* ── Click overlays over SVG cards ──────────────────────────────────────── */
.zone {
  transition: background .25s var(--ease-sharp), transform .25s var(--ease-sharp), box-shadow .25s var(--ease-sharp);
  border-radius: 6px;
}
.zone:hover {
  background: rgba(255,255,255,.10);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(37,66,107,.40);
}
.zone-light:hover { background: rgba(37,66,107,.04); }

/* ── Ambient float ──────────────────────────────────────────────────────── */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.float-y { animation: floatY 4.5s ease-in-out infinite; }

@keyframes shipRock {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%     { transform: translateY(-5px) rotate(1.5deg); }
  50%     { transform: translateY(0) rotate(-1deg); }
  75%     { transform: translateY(-5px) rotate(1.5deg); }
}
.ship-rock { animation: shipRock 3s ease-in-out infinite; transform-origin: 50% 70%; }

/* Compass drift — matches source keyframes (18s loop) */
@keyframes compassDrift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-14px,-6px); }
  50%  { transform: translate(6px,4px); }
  75%  { transform: translate(-8px,-4px); }
  100% { transform: translate(0,0); }
}
.compass-drift { animation: compassDrift 18s ease-in-out infinite; transform-origin: center; }

/* ── Hero title sweep ───────────────────────────────────────────────────── */
@keyframes titleSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.title-sweep {
  background: linear-gradient(90deg, #25426B 0%, #5e8cd1 50%, #25426B 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: titleSweep 7s linear infinite;
}

/* ── Underline draw ─────────────────────────────────────────────────────── */
.underline-draw { position: relative; display: inline-block; }
.underline-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #25426B, transparent);
  transition: width 1s var(--ease-snap) .2s;
  border-radius: 2px;
}
.underline-draw.in-view::after { width: 72px; }

/* ── Tag chip hover ─────────────────────────────────────────────────────── */
.chip {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-sharp), color .25s var(--ease-sharp);
  cursor: default;
}
.chip::before {
  content: '';
  position: absolute; inset: 0;
  background: #25426B;
  transform: translateX(-101%);
  transition: transform .4s var(--ease-snap);
  z-index: -1;
}
.chip:hover { color: #fff !important; transform: translateY(-2px); }
.chip:hover::before { transform: translateX(0); }

/* ── Brand-pill hover shake (source whileHover) ─────────────────────────── */
@keyframes brandShake {
  0%   { transform: translateY(-6px) scale(1.08) rotate(0deg); }
  20%  { transform: translateY(-6px) scale(1.08) rotate(-4deg); }
  40%  { transform: translateY(-6px) scale(1.08) rotate(4deg); }
  60%  { transform: translateY(-6px) scale(1.08) rotate(-2deg); }
  80%  { transform: translateY(-6px) scale(1.08) rotate(2deg); }
  100% { transform: translateY(-6px) scale(1.08) rotate(0deg); }
}
.brand-pill {
  cursor: pointer;
  transition: transform .25s var(--ease-sharp), filter .25s var(--ease-sharp);
}
.brand-pill:hover {
  animation: brandShake .5s ease-in-out;
  transform: translateY(-6px) scale(1.08);
}
.brand-pill.iteee:hover         { filter: drop-shadow(0 8px 16px rgba(0,160,233,.40)); }
.brand-pill.systemsharing:hover { filter: drop-shadow(0 8px 16px rgba(0,104,183,.35)); }
.brand-pill.aiocr:hover         { filter: drop-shadow(0 8px 16px rgba(234,86,20,.35)); }
.brand-pill:active { transform: scale(.93); }

/* Side-banner tilt */
.tilt-banner {
  transition: transform .4s var(--ease-sharp), box-shadow .4s var(--ease-sharp);
  will-change: transform;
}
.tilt-banner:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 50px rgba(37,66,107,.30);
}

/* Nav active underline grow (source scaleX 0→1) */
@keyframes navUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.nav-underline {
  transform-origin: left center;
  animation: navUnderline .4s var(--ease-sharp) both;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 28s linear infinite; }

/* Column filter / tag pills — lift + glow on hover */
.filter-pill {
  transition:
    transform .25s var(--ease-sharp),
    background .25s var(--ease-sharp),
    box-shadow .25s var(--ease-sharp);
}
.filter-pill:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(37,66,107,.08);
  box-shadow: 0 8px 20px rgba(37,66,107,.22);
}
.filter-pill:active { transform: translateY(0) scale(.97); }

/* Column-top article card overlays — soft wash + lift + outline ring on hover.
   The underlying SVG already paints the card; the overlay sits above it. */
.column-card {
  position: relative;
  transition:
    transform .3s var(--ease-sharp),
    background .3s var(--ease-sharp),
    box-shadow .3s var(--ease-sharp);
}
.column-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,66,107,0);
  transition: box-shadow .3s var(--ease-sharp);
}
.column-card:hover {
  transform: translateY(-6px);
  background: rgba(37,66,107,.04);
  box-shadow: 0 22px 40px rgba(37,66,107,.18);
}
.column-card:hover::after {
  box-shadow: 0 0 0 2px rgba(37,66,107,.18);
}
.column-card:active { transform: translateY(-2px) scale(.99); }

/* About-page hero — ship photo right-anchored, pale-blue text card overlaid
   on the left. Card uses Group 601.svg (1032×528, fill-opacity .8) so the
   ship shows through the overlap area at a soft tint. */
.about-hero { isolation: isolate; }
.about-hero__ship {
  position: absolute;
  right: 0;
  top: 0;
  width: 962px;
  height: 722px;
  object-fit: cover;
  display: block;
  z-index: 1;
  pointer-events: none;
  filter: saturate(0.9);
}
.about-hero__card {
  position: absolute;
  left: 0;
  top: 108px;            /* (744 − 528) / 2 — vertically centered */
  width: 1032px;
  height: 528px;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* About-page navigation cards (代表メッセージ / 会社概要 / オウンドメディア / メンバー)
   The card visual is baked into the SVG underneath; this overlay just
   reacts to hover with a subtle lift + ring. */
.about-nav-card {
  transition:
    transform .25s var(--ease-sharp),
    box-shadow .25s var(--ease-sharp);
}
.about-nav-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,66,107,0);
  transition: box-shadow .25s var(--ease-sharp);
}
.about-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(37,66,107,.22);
}
.about-nav-card:hover::after {
  box-shadow: 0 0 0 2px rgba(37,66,107,.25);
}
.about-nav-card:active { transform: translateY(0) scale(.98); }

/* Column-top pagination chips — small underline/dot-style hover */
.col-page-btn {
  transition:
    transform .25s var(--ease-sharp),
    background .25s var(--ease-sharp),
    box-shadow .25s var(--ease-sharp);
}
.col-page-btn:hover {
  transform: translateY(-2px);
  background: rgba(37,66,107,.08);
  box-shadow: 0 6px 16px rgba(37,66,107,.18);
}
.col-page-btn--arrow:hover {
  transform: translateY(-2px) scale(1.1);
  background: rgba(243,203,0,.18);
}
.col-page-btn:active { transform: translateY(0) scale(.96); }

/* ── Case category page: image inside the card lifts & zooms on hover ── */
.case-photo {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .4s var(--ease-sharp), box-shadow .4s var(--ease-sharp);
}
.case-photo img {
  transition: transform .8s var(--ease-sharp), filter .4s var(--ease-sharp);
}
.case-photo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 50px rgba(37,66,107,.30);
}
.case-photo:hover img {
  transform: scale(1.08);
  filter: saturate(1.1);
}

/* ── Column-detail author avatar: gentle pulse + hover bloom ── */
@keyframes avatarPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,66,107,.35); }
  70%     { box-shadow: 0 0 0 18px rgba(37,66,107,0); }
}
.avatar-pulse {
  border-radius: 50%;
  animation: avatarPulse 2.8s ease-out infinite;
  transition: transform .4s var(--ease-sharp);
}
.avatar-pulse:hover {
  transform: scale(1.06);
}

/* ── Contact / privacy: gentle continuous tilt on hero band when in view ── */
@keyframes heroTilt {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-3px) rotate(.2deg); }
}
.hero-breath.in-view {
  animation: heroTilt 6s ease-in-out infinite 1s;
}

/* ── Generic clickable SVG-band region with subtle wash + lift ── */
.svg-zone {
  position: absolute;
  border-radius: 8px;
  cursor: pointer;
  transition: background .25s var(--ease-sharp), transform .25s var(--ease-sharp), box-shadow .25s var(--ease-sharp);
  pointer-events: auto;
}
.svg-zone:hover {
  background: rgba(37,66,107,.06);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(37,66,107,.20);
}

/* ── Contact submit button: pulsing yellow CTA ─────────────────────────── */
.contact-cta-pulse {
  position: absolute;
  border-radius: 16px;
  pointer-events: none;
}
.contact-cta-pulse::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(243,203,0,.55);
  animation: pulseRing 2.4s ease-out infinite;
}

/* Case category card image — soft float + hover glow */
.case-card-img {
  animation: floatY 5s ease-in-out infinite;
  transition: box-shadow .35s var(--ease-sharp);
  box-shadow: 0 6px 18px rgba(37,66,107,.18);
}
.case-card-img:hover {
  box-shadow: 0 22px 50px rgba(37,66,107,.40);
}

/* Page-wide ambient animations */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(243,203,0,.6); }
  50%     { box-shadow: 0 0 0 12px rgba(243,203,0,0); }
}
.glow-yellow { animation: pulseGlow 2.4s ease-out infinite; }

@keyframes drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.subtle-drift { animation: drift 7s ease-in-out infinite; }

@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}
.cursor-blink {
  display:inline-block; width:2px; height:1em; background:#25426B;
  margin-left:6px; vertical-align:-2px; animation: blink 1.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}