/* A living surf memory: the photo floats freely, without a surrounding frame. */
.site-interior .app-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
.app-story-stage { position: relative; isolation: isolate; width: 100%; max-width: 460px; margin: 0 auto; padding: 40px 0 68px; --story-tilt-x: 0deg; --story-tilt-y: 0deg; }
.app-story-stage::before { content: ""; position: absolute; z-index: -2; inset: 10% -3% 6%; background: radial-gradient(ellipse, #47aaff70, #1644e800 70%); pointer-events: none; }
.app-story-float { position: relative; z-index: 1; width: 68%; max-width: 286px; margin: 0 auto; }
.site-interior .app-hero-card.app-story-visual,
.site-interior .app-hero-card.app-story-visual:hover {
  display: block; width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: visible;
  border: 0; border-radius: 18px; background: transparent;
  box-shadow: 0 26px 48px -12px #071a6499;
  transform: perspective(900px) rotateX(var(--story-tilt-x)) rotateY(var(--story-tilt-y)) rotate(-4deg);
  transition: transform .3s ease-out;
}
.site-interior .app-story-visual .hero-app-preview { display: block; width: 100%; height: auto; max-height: none; border-radius: 18px; box-shadow: none; }
.story-sun { position: absolute; z-index: -1; width: 42%; aspect-ratio: 1; right: 0; top: 8%; background: #dfff69; border-radius: 50%; }
.story-spark { position: absolute; z-index: 2; left: 6%; top: 42%; width: 44px; height: 44px; fill: #dfff69; }
.story-wave { position: absolute; z-index: -1; left: -2%; bottom: 10%; width: 104%; height: auto; stroke: #72cfff; stroke-width: 5; stroke-linecap: round; }
.story-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap; box-shadow: 0 10px 24px #071a6433; pointer-events: none; }
.story-note-record { top: 4%; left: 0; background: #18202b; color: #fff; transform: rotate(-7deg); }
.story-record-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #dfff69; }
.story-note-share { bottom: 14%; left: 0; background: #dfff69; color: #18202b; transform: rotate(5deg); }
.story-note-share svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-mascot { position: absolute; z-index: 3; width: 112px; height: auto; bottom: 8%; right: -1%; transform: rotate(9deg); pointer-events: none; }
.story-spark, .story-sun, .story-wave { pointer-events: none; }
.story-motion-toggle { position: absolute; bottom: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 0; border-radius: 4px; padding: 8px 10px; background: #1036bd; color: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.story-motion-toggle[hidden] { display: none; }
.story-motion-toggle:hover { background: #0b278d; }
.story-motion-icon { width: 12px; text-align: center; }
.app-story-stage a:focus-visible, .app-story-stage button:focus-visible { outline: 3px solid #dfff69; outline-offset: 6px; }

/* Motion starts only after its pause control is available. */
@media (prefers-reduced-motion: no-preference) {
  .app-story-stage[data-story-ready] { animation: story-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
  .app-story-stage[data-story-ready] .app-story-float { animation: story-float 6s ease-in-out infinite; }
  .app-story-stage[data-story-ready] .story-note-record { animation: story-note-float 5s ease-in-out -1s infinite; }
  .app-story-stage[data-story-ready] .story-note-share { animation: story-share-float 6s ease-in-out -2s infinite; }
  .app-story-stage[data-story-ready] .story-mascot { animation: story-surf 5s ease-in-out -.8s infinite; }
  .app-story-stage[data-story-ready] .story-spark { animation: story-spark-turn 18s linear infinite; }
  .app-story-stage[data-story-ready] .story-wave { animation: story-wave-drift 7s ease-in-out infinite; }
  .app-story-stage[data-story-ready][data-motion="paused"], .app-story-stage[data-story-ready][data-motion="paused"] * { animation-play-state: paused; }
}
@keyframes story-arrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes story-note-float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(7px) rotate(-3deg); } }
@keyframes story-share-float { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes story-surf { 0%, 100% { transform: translateY(0) rotate(9deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes story-spark-turn { to { transform: rotate(360deg); } }
@keyframes story-wave-drift { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@media (max-width: 1080px) {
  .site-interior .app-hero-grid { gap: 32px; }
  .story-note { padding: 10px 12px; font-size: 11px; }
  .story-mascot { width: 90px; }
}
@media (max-width: 960px) {
  .site-interior .app-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 28px; }
}
@media (max-width: 760px) {
  .site-interior .app-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .app-story-stage { max-width: 360px; padding-top: 32px; }
  .app-story-float { width: 70%; max-width: 240px; }
  .site-interior .app-hero-card.app-story-visual,
  .site-interior .app-hero-card.app-story-visual:hover { transform: rotate(-2deg); }
  .story-spark { width: 32px; height: 32px; left: 4%; }
  .story-note { gap: 7px; }
  .story-note-record { top: 4%; left: 0; }
  .story-note-share { bottom: 17%; }
  .story-mascot { width: 90px; right: 0; bottom: 9%; }
  .story-wave { width: 100%; left: 0; }
  .story-sun { right: 0; }
}
@media (max-width: 380px) {
  .story-note { font-size: 10px; padding: 9px 10px; }
  .story-mascot { width: 74px; }
  .story-note-share svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-story-stage, .app-story-stage * { animation: none !important; transition: none !important; }
}