/* SEKAILABO' front page: Bauhaus geometry + motion layer.
   Static styles apply always. Every animation is scoped to .sl-motion-on, which
   js/front-motion.js adds only when prefers-reduced-motion is not "reduce". */
body.home {
  --sl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sl-ease-snap: cubic-bezier(.7, 0, .2, 1);
  --sl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Scroll meter ---------- */
.sl-scroll-meter { position: fixed; z-index: 60; top: 0; right: 0; left: 0; height: 4px; pointer-events: none; }
.sl-scroll-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--sl-red) 0 33.3%, var(--sl-yellow) 33.3% 66.6%, var(--sl-blue) 66.6%); transform: scaleX(0); transform-origin: left; }

/* ---------- Hero composition ---------- */
.sl-hero-geometry { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sl-hero-shape { position: absolute; display: block; }
.sl-hero-shape--disc { top: 9%; right: 1.5%; width: clamp(220px, 27vw, 430px); aspect-ratio: 1; border-radius: 50%; background: var(--sl-yellow); }
.sl-hero-shape--circle { top: 11%; left: 37%; width: clamp(90px, 9vw, 140px); aspect-ratio: 1; border: 3px solid var(--sl-ink); border-top-color: var(--sl-red); border-right-color: var(--sl-red); border-radius: 50%; }
.sl-hero-shape--half { bottom: 0; left: 41%; width: clamp(170px, 21vw, 310px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--sl-red); transform-origin: 50% 100%; }
.sl-hero-shape--square { top: 21%; left: 47%; width: clamp(44px, 5vw, 78px); aspect-ratio: 1; background: var(--sl-blue); rotate: 12deg; }
.sl-hero-shape--triangle { bottom: 24%; left: 39%; width: clamp(54px, 5.5vw, 84px); aspect-ratio: 1 / .88; background: var(--sl-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sl-hero-shape--bar { top: 62%; left: 43%; width: clamp(90px, 11vw, 170px); height: 12px; background: var(--sl-blue); rotate: -35deg; }
.sl-hero-shape--dots { top: 17%; left: 1.6%; width: 96px; aspect-ratio: 1; background-image: radial-gradient(circle, var(--sl-ink) 2px, transparent 2.5px); background-size: 16px 16px; opacity: .55; }
.sl-hero h1 em { background-image: linear-gradient(var(--sl-yellow), var(--sl-yellow)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sl-char { display: inline-block; }
.sl-hero-visual { overflow: visible; box-shadow: 14px 14px 0 var(--sl-ink); }
.sl-hero-visual::after { position: absolute; z-index: 3; inset: 0; background: var(--sl-red); content: ""; transform: scaleX(0); pointer-events: none; }
.sl-hero-visual img { position: relative; }

/* ---------- Kinetic marquee ---------- */
.sl-marquee { position: relative; overflow: hidden; padding: clamp(14px, 2vw, 24px) 0; border-block: 2px solid var(--sl-ink); background: var(--sl-ink); color: var(--sl-paper); }
.sl-marquee-track { display: flex; width: max-content; will-change: transform; }
.sl-marquee-set { display: flex; flex-shrink: 0; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding-right: clamp(18px, 2.4vw, 36px); }
.sl-marquee-set span { font: 700 clamp(30px, 4.6vw, 68px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; white-space: nowrap; }
.sl-marquee-set span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--sl-paper); }
.sl-marquee-set i { display: block; flex-shrink: 0; width: clamp(24px, 3vw, 44px); aspect-ratio: 1; }
.sl-mq-circle { border-radius: 50%; background: var(--sl-yellow); }
.sl-mq-square { background: var(--sl-red); }
.sl-mq-triangle { background: var(--sl-blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sl-mq-half { aspect-ratio: 2 / 1 !important; border-radius: 999px 999px 0 0; background: var(--sl-paper); }

/* ---------- Section accents ---------- */
.sl-section, .sl-contact { --sl-wipe: var(--sl-red); }
.sl-connect, .sl-services { --sl-wipe: var(--sl-blue); }
.sl-method, .sl-contact, .sl-journal { --sl-wipe: var(--sl-yellow); }
.sl-map-engine::before { position: absolute; right: -55%; bottom: -55%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--sl-yellow) 0 25%, transparent 0 50%, var(--sl-red) 0 75%, transparent 0); content: ""; opacity: .92; }
body.home .sl-home .sl-map-node h3 { margin-top: 18px !important; font-family: "Noto Sans JP", sans-serif; font-size: clamp(18px, 1.65vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.45; }
.sl-node-index b { display: inline-block; margin-left: 8px; padding: 2px 6px; background: var(--sl-ink); color: var(--sl-paper); font-weight: 600; letter-spacing: .1em; }
.sl-map-field .sl-node-index b, .sl-map-data .sl-node-index b { background: var(--sl-blue); }
body.home .sl-home .sl-map-engine strong { font: 700 clamp(28px, 2.9vw, 42px)/1.28 "Noto Sans JP", sans-serif; letter-spacing: -.03em; }
.sl-method-flow li { position: relative; }
/* The connecting line is drawn per step (under each number box) so step animations can't lift it above the numbers. */
.sl-method-flow::before { display: none; }
.sl-method-flow li::before { position: absolute; z-index: 0; top: 51px; right: -1px; left: 0; height: 2px; content: ""; transform-origin: left; }
.sl-method-flow li:nth-child(1)::before { background: var(--sl-yellow); }
.sl-method-flow li:nth-child(2)::before { background: var(--sl-red); }
.sl-method-flow li:nth-child(3)::before { background: var(--sl-blue); }
.sl-method-flow li:nth-child(4)::before { background: var(--sl-paper); }
.sl-method-flow li > span { color: #fff; font-weight: 600; font-size: 12px !important; }
.sl-method-flow li::after { position: absolute; top: 30px; right: 26px; width: 44px; aspect-ratio: 1; content: ""; transition: rotate .6s var(--sl-ease-spring); }
.sl-method-flow li:nth-child(1)::after { border-radius: 50%; background: var(--sl-yellow); }
.sl-method-flow li:nth-child(2)::after { background: var(--sl-red); }
.sl-method-flow li:nth-child(3)::after { background: var(--sl-blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sl-method-flow li:nth-child(4)::after { aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--sl-paper); }
.sl-method-flow li:hover::after { rotate: 90deg; }
.sl-method-flow li:nth-child(1):hover::after { rotate: 0deg; scale: 1.25; transition: scale .5s var(--sl-ease-spring); }

.sl-service-grid article { isolation: isolate; }
body.home .sl-home .sl-service-grid article:hover { background: transparent; }
.sl-service-grid article::before { position: absolute; z-index: -1; inset: 0; background: var(--sl-blue); content: ""; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--sl-ease-snap); }
.sl-service-grid article:nth-child(2)::before { background: #c7361f; }
.sl-service-grid article:nth-child(3)::before { background: var(--sl-ink); }
.sl-service-grid article:hover::before, .sl-service-grid article:focus-within::before { transform: scaleY(1); }
.sl-service-symbol:not(.sl-service-symbol--line) { width: 28px; height: 28px; }
.sl-service-symbol { transition: scale .6s var(--sl-ease-spring), rotate .6s var(--sl-ease-spring), background-color .3s, border-color .3s; }
.sl-service-grid article:hover .sl-service-symbol { scale: 2.2; rotate: 180deg; }
.sl-service-grid article:hover .sl-service-symbol--circle, .sl-service-grid article:hover .sl-service-symbol--half { border-color: var(--sl-yellow); border-bottom-color: transparent; }
.sl-service-grid article:hover .sl-service-symbol--circle { border-bottom-color: var(--sl-yellow); }
.sl-service-grid article:hover .sl-service-symbol--line, .sl-service-grid article:hover .sl-service-symbol--square { background: var(--sl-yellow); }

.sl-contact::before { border: clamp(18px, 2.4vw, 34px) solid transparent; border-top-color: var(--sl-yellow); border-right-color: var(--sl-yellow); }
.sl-contact > a { padding-inline: 14px; background: var(--sl-blue); }
.sl-contact > a span { display: inline-block; transition: translate .4s var(--sl-ease-spring); }
.sl-contact > a:hover span { translate: 6px -6px; }
.sl-text-link span { display: inline-block; }
.sl-nowrap { white-space: nowrap; }
body.home .sl-home .sl-contact h2 { max-width: none; font-size: clamp(44px, 5.6vw, 88px); }

/* ---------- Motion (only with .sl-motion-on) ---------- */
@keyframes sl-shape-in { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes sl-spin { to { rotate: 360deg; } }
@keyframes sl-tick { 0%, 20% { rotate: 12deg; } 30%, 45% { rotate: 102deg; } 55%, 70% { rotate: 192deg; } 80%, 100% { rotate: 282deg; } }
@keyframes sl-rock { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
@keyframes sl-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes sl-char-in { from { opacity: 0; transform: translateY(.6em) rotate(14deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes sl-mark { from { background-size: 0 .22em; } to { background-size: 100% .22em; } }
@keyframes sl-wipe-clip { 0% { clip-path: inset(0 100% 0 0); } 50%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sl-wipe-clip-wide { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(-40px -40px -40px -40px); } }
@keyframes sl-wipe-block { 0% { transform: scaleX(0); transform-origin: left; } 48% { transform: scaleX(1); transform-origin: left; } 52% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes sl-zoom-out { from { transform: scale(1.18); } to { transform: none; } }
@keyframes sl-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sl-pop { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes sl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sl-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sl-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sl-flip-in { from { opacity: 0; rotate: -180deg; scale: 0; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes sl-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.8; } }
@keyframes sl-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes sl-map-signal { 0%, 22% { opacity: 0; transform: translateX(-24px) rotate(-37deg); } 48%, 64% { opacity: .95; transform: translateX(0) rotate(-37deg); } 100% { opacity: 0; transform: translateX(24px) rotate(-37deg); } }
@keyframes sl-slide-bg { to { background-position: 48px 0; } }
@keyframes sl-slide-grid { to { background-position: 16px 16px; } }

.sl-motion-on [data-sl-reveal] { transition: opacity .8s ease, transform 1s var(--sl-ease-out); transition-delay: var(--sl-delay, 0ms); }
.sl-motion-on [data-sl-reveal]:not(.is-sl-in) { opacity: 0; transform: translateY(48px); }

/* Hero: shapes assemble, then keep moving */
.sl-motion-on .sl-hero-shape { animation: sl-shape-in .9s var(--sl-ease-spring) both; }
.sl-motion-on .sl-hero-shape--disc { animation: sl-shape-in 1.1s var(--sl-ease-spring) .05s both, sl-breathe 7s ease-in-out 1.4s infinite; }
.sl-motion-on .sl-hero-shape--circle { animation: sl-shape-in .9s var(--sl-ease-spring) .25s both, sl-spin 14s linear 1.2s infinite; }
.sl-motion-on .sl-hero-shape--half { animation: sl-shape-in .9s var(--sl-ease-spring) .35s both, sl-rock 6s ease-in-out 1.3s infinite; }
.sl-motion-on .sl-hero-shape--square { animation: sl-shape-in .9s var(--sl-ease-spring) .45s both, sl-tick 8s var(--sl-ease-snap) 1.4s infinite; }
.sl-motion-on .sl-hero-shape--triangle { animation: sl-shape-in .9s var(--sl-ease-spring) .55s both, sl-spin 22s linear 1.5s infinite reverse; }
.sl-motion-on .sl-hero-shape--bar { animation: sl-shape-in .9s var(--sl-ease-spring) .65s both; }
.sl-motion-on .sl-hero-shape--dots { animation: sl-shape-in .9s var(--sl-ease-out) .75s both; }
.sl-motion-on .sl-hero-copy { transform: none !important; opacity: 1 !important; }
.sl-motion-on .sl-hero .sl-char { animation: sl-char-in .8s var(--sl-ease-out) both; animation-delay: calc(var(--sl-i) * 34ms + 220ms); }
.sl-motion-on .sl-hero h1 em { animation: sl-mark .7s var(--sl-ease-snap) 1.1s both; }
.sl-motion-on .sl-hero-copy .sl-kicker, .sl-motion-on .sl-hero-lead, .sl-motion-on .sl-hero-copy .sl-text-link { animation: sl-rise .8s var(--sl-ease-out) both; }
.sl-motion-on .sl-hero-copy .sl-kicker { animation-delay: .1s; }
.sl-motion-on .sl-hero-lead { animation-delay: .8s; }
.sl-motion-on .sl-hero-copy .sl-text-link { animation-delay: 1s; }
.sl-motion-on .sl-text-link span { animation: sl-nudge 1.6s ease-in-out 2s infinite; }
.sl-motion-on .sl-hero-visual { transform: none !important; opacity: 1 !important; animation: sl-wipe-clip-wide 1.3s var(--sl-ease-snap) .35s both; }
.sl-motion-on .sl-hero-visual::after { animation: sl-wipe-block 1.3s var(--sl-ease-snap) .35s both; }
.sl-motion-on .sl-hero-visual img { animation: sl-zoom-out 1.8s var(--sl-ease-out) .9s both; }
.sl-motion-on .sl-hero-stats span { animation: sl-rise .7s var(--sl-ease-out) both; }
.sl-motion-on .sl-hero-stats span:nth-child(1) { animation-delay: 1.1s; }.sl-motion-on .sl-hero-stats span:nth-child(2) { animation-delay: 1.18s; }.sl-motion-on .sl-hero-stats span:nth-child(3) { animation-delay: 1.26s; }.sl-motion-on .sl-hero-stats span:nth-child(4) { animation-delay: 1.34s; }
.sl-motion-on .sl-grid-signal { animation: sl-pulse 3.2s ease-in-out infinite; }
.sl-motion-on .sl-grid-signal-two { animation-delay: 1.2s; }

/* Marquee shapes spin while the band scrolls (band position is driven by JS) */
.sl-motion-on .sl-marquee-set i { animation: sl-spin 6s linear infinite; }
.sl-motion-on .sl-marquee-set .sl-mq-circle { animation: sl-breathe 2.4s ease-in-out infinite; }

/* Heading wipe: a colour block sweeps across and leaves the text behind */
body.home .sl-home.sl-motion-on [data-sl-reveal] h2 { position: relative; }
.sl-motion-on [data-sl-reveal] h2::after { position: absolute; z-index: 1; inset: 0; background: var(--sl-wipe); content: ""; transform: scaleX(0); pointer-events: none; }
.sl-motion-on [data-sl-reveal]:not(.is-sl-in) h2 { clip-path: inset(0 100% 0 0); }
.sl-motion-on .is-sl-in h2 { animation: sl-wipe-clip 1.1s var(--sl-ease-snap) calc(var(--sl-delay, 0ms) + 150ms) both; }
.sl-motion-on .is-sl-in h2::after { animation: sl-wipe-block 1.1s var(--sl-ease-snap) calc(var(--sl-delay, 0ms) + 150ms) both; }
.sl-motion-on [data-sl-reveal] .sl-kicker span { opacity: 0; }
.sl-motion-on .is-sl-in .sl-kicker span { opacity: 1; animation: sl-flip-in .8s var(--sl-ease-spring) both; }

/* Connect map + storyboard */
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-node { animation: sl-rise .7s var(--sl-ease-out) both; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-inputs .sl-map-node:nth-child(1) { animation-delay: .15s; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-inputs .sl-map-node:nth-child(2) { animation-delay: .25s; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-outputs .sl-map-node:nth-child(1) { animation-delay: .55s; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-outputs .sl-map-node:nth-child(2) { animation-delay: .65s; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-outputs .sl-map-node:nth-child(3) { animation-delay: .75s; }
.sl-motion-on .sl-connect-map.is-sl-in .sl-map-outputs .sl-map-node:nth-child(4) { animation-delay: .85s; }
.sl-motion-on .sl-map-engine::before { animation: sl-spin 16s linear infinite; }
.sl-motion-on .sl-map-engine i { animation: sl-map-signal 2.2s var(--sl-ease-out) infinite; }
.sl-motion-on .sl-map-engine i:nth-of-type(2) { animation-delay: .35s; }
.sl-motion-on .sl-map-engine i:nth-of-type(3) { animation-delay: .7s; }
.sl-motion-on .sl-system-storyboard path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sl-motion-on .sl-system-storyboard.is-sl-in path[pathLength] { animation: sl-draw 1.4s var(--sl-ease-snap) both; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--data path { animation-delay: .5s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system path { animation-delay: 1s; animation-duration: 1.8s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-arrow { animation-delay: .3s; }
.sl-motion-on .sl-system-storyboard circle, .sl-motion-on .sl-system-storyboard rect { transform-box: fill-box; transform-origin: center; }
.sl-motion-on .sl-system-storyboard:not(.is-sl-in) circle, .sl-motion-on .sl-system-storyboard:not(.is-sl-in) rect { opacity: 0; }
.sl-motion-on .sl-system-storyboard.is-sl-in circle, .sl-motion-on .sl-system-storyboard.is-sl-in rect { animation: sl-pop .6s var(--sl-ease-spring) both; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(1) { animation-delay: .1s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(2) { animation-delay: .18s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(3) { animation-delay: .26s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(4) { animation-delay: .34s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(5) { animation-delay: .42s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(6) { animation-delay: .5s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--field circle:nth-child(7) { animation-delay: .58s; }
.sl-motion-on .sl-system-storyboard.is-sl-in rect { animation-delay: 1.1s; }
.sl-motion-on .sl-system-storyboard.is-sl-in rect:nth-of-type(2) { animation-delay: 1.25s; }
.sl-motion-on .sl-system-storyboard.is-sl-in rect:nth-of-type(3) { animation-delay: 1.4s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system circle { animation: sl-pop .6s var(--sl-ease-spring) 1.9s both, sl-pulse 2.8s ease-in-out 2.6s infinite; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system circle:nth-of-type(2) { animation-delay: 2s, 3s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system circle:nth-of-type(3) { animation-delay: 2.1s, 3.4s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system circle:nth-of-type(4) { animation-delay: 2.2s, 3.8s; }
.sl-motion-on .sl-system-storyboard.is-sl-in .sl-system-stage--system circle:nth-of-type(5) { animation-delay: 2.3s, 4.2s; }

/* Method: progress line draws, steps and shapes drop in */
.sl-motion-on .sl-method-flow li::before { transform: scaleX(0); }
.sl-motion-on .sl-method-flow.is-sl-in li::before { animation: sl-grow-x .45s linear both; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(1)::before { animation-delay: .35s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(2)::before { animation-delay: .8s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(3)::before { animation-delay: 1.25s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(4)::before { animation-delay: 1.7s; animation-timing-function: var(--sl-ease-out); }
.sl-motion-on .sl-method-flow li { opacity: 0; }
.sl-motion-on .sl-method-flow.is-sl-in li { opacity: 1; animation: sl-rise .8s var(--sl-ease-out) both; }
.sl-motion-on .sl-method-flow li::after { scale: 0; }
.sl-motion-on .sl-method-flow.is-sl-in li::after { scale: 1; transition: rotate .6s var(--sl-ease-spring), scale .8s var(--sl-ease-spring); }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(1) { animation-delay: .2s; }.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(1)::after { transition-delay: 0s, .7s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(2) { animation-delay: .4s; }.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(2)::after { transition-delay: 0s, .9s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(3) { animation-delay: .6s; }.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(3)::after { transition-delay: 0s, 1.1s; }
.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(4) { animation-delay: .8s; }.sl-motion-on .sl-method-flow.is-sl-in li:nth-child(4)::after { transition-delay: 0s, 1.3s; }
.sl-motion-on .sl-method-flow.is-sl-in li:hover::after { transition-delay: 0s; }

/* Projects */
.sl-motion-on .sl-project-reel::before { animation: sl-spin 5.6s linear infinite; }

/* Journal + contact idle motion */
.sl-motion-on .sl-insight-shape--circle::before { animation: sl-breathe 3s ease-in-out infinite; }
.sl-motion-on .sl-insight-shape--bars { animation: sl-slide-bg 3s linear infinite; background-size: 24px 100%, auto; }
.sl-motion-on .sl-insight-shape--grid { animation: sl-slide-grid 2.4s linear infinite; }
.sl-motion-on .sl-contact::before { animation: sl-spin 24s linear infinite; }
.sl-motion-on .sl-contact-symbol--square { animation: sl-tick 7s var(--sl-ease-snap) infinite; }
.sl-motion-on .sl-contact-symbol--disc { animation: sl-pulse 3.4s ease-in-out infinite; }

@media (max-width: 820px) {
  .sl-hero-shape--disc { top: auto; right: -22%; bottom: 17%; width: 78vw; }
  .sl-hero-shape--circle { top: 10.5%; left: auto; right: 5%; width: 54px; border-width: 2px; }
  .sl-hero-shape--half { left: 4%; width: 150px; }
  .sl-hero-shape--square { top: 46%; left: auto; right: 7%; width: 30px; }
  .sl-hero-shape--triangle { bottom: 8%; left: auto; right: 12%; width: 40px; }
  .sl-hero-shape--bar { top: auto; bottom: 30%; left: -4%; width: 90px; height: 9px; }
  .sl-hero-shape--dots { display: none; }
  body.home .sl-home .sl-hero h1 { font-size: clamp(36px, 10.6vw, 56px); }
  body.home .sl-home .sl-map-node h3 { margin-top: 14px !important; font-size: 16px; }
  .sl-node-index b { display: table; margin: 7px 0 0; }
  body.home .sl-home .sl-map-engine strong { font-size: 32px; }
  body.home .sl-home .sl-contact h2 { font-size: clamp(32px, 9.2vw, 52px); line-height: 1.12; }
  .sl-grid-signal-one { display: none; }
  .sl-contact::before { top: auto; right: -38vw; bottom: -38vw; width: 86vw; height: 86vw; border-width: 16px; }
  .sl-hero-visual { box-shadow: 10px 10px 0 var(--sl-ink); }
  .sl-method-flow li::after { top: 10px; right: 0; bottom: auto; width: 26px; }
  .sl-method-flow li::before { top: 0; right: auto; bottom: 0; left: 25px; width: 2px; height: auto; transform-origin: top; }
  .sl-motion-on .sl-method-flow li::before { transform: scaleY(0); }
  .sl-motion-on .sl-method-flow.is-sl-in li::before { animation-name: sl-grow-y; }
  .sl-map-engine::before { right: -18%; bottom: -60%; width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero-shape, .sl-project-mark, .sl-contact-symbol, .sl-system-storyboard g { translate: none !important; }
  .sl-marquee-track { transform: none !important; }
}