/* One shared interaction system. Layout, content, and image crops stay in styles.css. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --surface-accent: rgba(49, 95, 168, 0.38);
}

:is(.organization-connect, .impact-card, .contact-route-community) {
  --surface-accent: rgba(238, 138, 61, 0.5);
}

:is(.organization-card, .student-support-initiative, .ai-initiatives, .result-story,
    .impact-card, .project-card, .latest-updates-list, .column-card, .instagram-showcase,
    .kinone-ai-profile, .kinone-chat) {
  box-shadow: var(--site-shadow);
}

:is(.organization-card, .project-card, .impact-card, .column-card, .result-story,
    .result-record, .contact-route, .overview-links a, .latest-update, .column-related-link) {
  transition: opacity 600ms var(--motion-ease), translate 600ms var(--motion-ease),
    transform 300ms var(--motion-ease), box-shadow 300ms ease,
    border-color 300ms ease, background-color 300ms ease;
}

.organization-card::after,
.project-card::after {
  background: var(--kinone-aurora-soft);
  border: 0;
  border-radius: inherit;
  content: "";
  display: block;
  height: auto;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 350ms ease;
  width: auto;
}

.organization-card > * { position: relative; z-index: 1; }
.project-card-ai::after { background: linear-gradient(115deg, transparent 30%, rgba(117, 193, 229, 0.09)); }
.vision-message { border-color: var(--site-line-blue); }
.value-icon { margin: 0 auto 13px; display: flex; }
.values span { display: block; }
.values div::after { pointer-events: none; }
.vision .values div:hover { background: rgba(255, 255, 255, 0.46); }
.hero-aura, .vision-orbit, .instagram-aura, .contact-glow { animation-play-state: paused; }
.atmosphere-visible :is(.hero-aura, .vision-orbit, .instagram-aura, .contact-glow) { animation-play-state: running; }

:is(.button, .nav-contact, .kinone-chat-path) {
  transition: transform 260ms var(--motion-ease), box-shadow 260ms ease,
    border-color 260ms ease, background-color 260ms ease;
}
:is(.button, .button-link, .text-link, .overview-links a, .contact-route,
    .result-story-link, .impact-card-link, .latest-update-link, .column-read-link,
    .column-related-link) :is(i, [aria-hidden="true"]:last-child) {
  transition: transform 260ms var(--motion-ease);
}

/* No JS means no hidden content. Only off-screen blocks enter, once. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled [data-motion-reveal] {
    transition: opacity 600ms var(--motion-ease), translate 600ms var(--motion-ease),
      transform 300ms var(--motion-ease), box-shadow 300ms ease,
      border-color 300ms ease, background-color 300ms ease;
  }
  html.motion-enabled [data-motion-reveal]:not(.is-visible) {
    opacity: 0;
    translate: 0 20px;
  }
  html.motion-enabled [data-motion-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
  }
  html.motion-enabled .section-kicker[data-motion-reveal] p::after {
    transform-origin: left center;
    transition: transform 700ms var(--motion-ease);
  }
  html.motion-enabled .section-kicker[data-motion-reveal]:not(.is-visible) p::after {
    transform: scaleX(0);
  }
}

/* Deliberate response on pointer devices; no sticky hover on touch. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.organization-card, .project-card, .impact-card, .column-card, .contact-route):is(:hover, :focus-within) {
    border-color: var(--surface-accent);
    box-shadow: var(--site-shadow-hover);
    transform: translateY(-4px);
  }
  :is(.organization-card, .project-card):is(:hover, :focus-within)::after { opacity: 1; }
  :is(.result-story, .result-record, .latest-update, .overview-links a, .column-related-link):hover {
    border-color: var(--surface-accent);
    transform: translateY(-3px);
  }
  :is(.button, .nav-contact, .kinone-chat-path):hover {
    box-shadow: 0 8px 22px rgba(49, 95, 168, 0.16);
    transform: translateY(-3px);
  }
  :is(.button, .button-link, .text-link, .overview-links a, .contact-route,
      .impact-card, .latest-update, .column-read-link, .column-related-link):hover
      :is(i, [aria-hidden="true"]:last-child) {
    transform: translateX(3px);
  }
  .instagram-post:hover img { transform: scale(1.025); }
  .contact-route:hover::before { animation: site-card-sweep 850ms ease-out 1; }
}

/* Bounded depth on the two narrative portraits, with no zoom. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.depth-enabled .hero-image-frame,
  html.depth-enabled .story-visual picture {
    transform: translateY(var(--portrait-offset, 0px));
  }
  .story-visual picture { position: absolute; inset: -4px 0; display: block; }
  .hero-aura-coral { animation: site-ambient-drift-a 18s ease-in-out infinite alternate; }
  .hero-aura-sky { animation: site-ambient-drift-b 22s ease-in-out infinite alternate; }
  .hero:not(.atmosphere-visible) .hero-aura { animation-play-state: paused; }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .hero-aura, .vision-orbit, .contact-glow, .instagram-aura { animation: none; }
  :is(.organization-card, .project-card, .impact-card, .column-card, .contact-route,
      .result-story, .result-record, .overview-links a, .latest-update, .values div):hover {
    transform: none;
  }
  .organization-card::after, .project-card::after { display: none; }
}

@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  html.motion-enabled [data-motion-reveal] { transition-duration: 400ms; }
  html.motion-enabled [data-motion-reveal]:not(.is-visible) { translate: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-reveal] { opacity: 1; translate: none; transition: none; }
  .hero-image-frame, .story-visual picture { transform: none; }
  .hero-aura, .vision-orbit, .contact-glow, .instagram-aura { animation: none; }
  :is(.organization-card, .project-card, .impact-card, .column-card, .contact-route,
      .result-story, .result-record, .latest-update, .overview-links a,
      .button, .nav-contact, .kinone-chat-path, .values div):hover { transform: none; }
}