/* The opening video is independent of the original FV. */
.intro-side{display:none}
@media(min-width:1024px){
  .intro-side{position:fixed;top:50%;width:calc((100% - 480px)/2 - 64px);max-width:300px;z-index:11;transform:translate(-50%,-50%);text-align:center;flex-direction:column;align-items:center;gap:22px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
  .intro-side,.intro-active .intro-side{display:flex;opacity:1;visibility:visible;pointer-events:auto;mix-blend-mode:multiply}
  .intro-side--brand{left:calc((100% - 480px)/4)}
  .intro-side--actions{left:calc(100% - (100% - 480px)/4)}
  .intro-brand-lockup{display:flex;align-items:center;gap:15px;width:100%;max-width:265px}
  .intro-brand-lockup img:first-child{width:26%;height:auto}
  .intro-brand-lockup img:last-child{width:68%;height:auto;mix-blend-mode:multiply}
  .intro-side p{font-weight:700;color:#173d42;font-size:14px}
  .intro-island-art{width:100%;max-width:255px;height:auto;mix-blend-mode:multiply;animation:intro-island-sway 6s ease-in-out infinite}
  .intro-gull{width:110px;height:auto;animation:intro-gull-flight 5s ease-in-out infinite}
  .intro-island-note{color:var(--base);font-size:11px;font-weight:700;letter-spacing:.1em}
  .intro-side .cta{width:206px;min-height:54px}
  .intro-waves{width:150px;height:23px;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);border-radius:50%;opacity:.55;animation:intro-island-sway 4s ease-in-out infinite}
}
@keyframes intro-island-sway{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -9px;rotate:1deg}}
@keyframes intro-gull-flight{0%,100%{translate:-12px 0;rotate:-4deg}50%{translate:12px -14px;rotate:4deg}}
@media(prefers-reduced-motion:reduce){.intro-island-art,.intro-gull,.intro-waves{animation:none}}
.intro-video-section{width:100%;max-width:480px;margin:0 auto;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;background:#126b7c;isolation:isolate}
.intro-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.intro-video-section::after{content:'';position:absolute;inset:65% 0 0;z-index:1;background:linear-gradient(transparent,#00242b55);pointer-events:none}
.intro-scroll{position:absolute;z-index:2;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;justify-items:center;gap:4px;padding:12px 28px;border:0;background:transparent;color:#fff;font-size:10px;letter-spacing:.25em;line-height:1.5;text-shadow:0 1px 5px #00333a88}
.intro-arrow{font-size:26px;line-height:1.2;animation:intro-scroll-cue 2s ease-in-out infinite}
@keyframes intro-scroll-cue{0%,100%{translate:0 -3px;opacity:.6}50%{translate:0 5px;opacity:1}}
.intro-active .site-header,.intro-active .desktop-brand,.intro-active .desktop-actions{opacity:0;visibility:hidden;pointer-events:none}
.site-header{transition:opacity .3s ease,visibility .3s ease}
/* Entrances use independent translate/scale properties to preserve existing artwork transforms. */
.motion-ready{opacity:0;translate:0 18px;filter:blur(3px)}
.company-image-title,.section-title-image{mix-blend-mode:multiply}
.motion-ready.is-arrived{animation:section-arrive .8s cubic-bezier(.2,.75,.25,1) var(--motion-delay,0s) both}
.motion-title.is-arrived{animation-name:title-arrive;animation-duration:.95s}
.motion-art.is-arrived{animation-name:art-arrive;animation-duration:1.1s}
@keyframes section-arrive{from{opacity:0;translate:0 18px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes title-arrive{0%{opacity:0;translate:0 22px;scale:.94;filter:blur(4px)}75%{opacity:1;scale:1.015;filter:blur(0)}100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes art-arrive{0%{opacity:0;translate:0 24px;scale:.94;filter:blur(4px)}70%{opacity:1;translate:0 -3px;scale:1.01;filter:blur(0)}100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.intro-arrow{animation:none}.motion-ready,.motion-ready.is-arrived{animation:none!important;opacity:1;translate:none;scale:1;filter:none}.site-header{transition:none}}
@media(scripting:none){.intro-active .site-header{opacity:1;visibility:visible;pointer-events:auto}}
/* Layered illustration motion; original FV and gentle cat rig stay untouched. */
.section-motion-active .work-car{animation:work-engine 2.6s ease-in-out infinite;transform-origin:50% 85%}
.section-motion-active .work-person{animation:mechanic-work 3.6s ease-in-out infinite;transform-origin:50% 95%}
.section-motion-active .work-visual::after{content:'✦';position:absolute;right:14%;top:12%;color:#10c6b1;font-size:32px;line-height:1;animation:tool-spark 2.2s ease-in-out infinite}
.section-motion-active .worklife-card.is-arrived{animation:art-arrive 1s var(--ease) var(--motion-delay,0s) both,postcard-drift 4.8s ease-in-out 1.1s infinite}
.section-motion-active .story-image.is-arrived{animation:art-arrive 1s var(--ease) var(--motion-delay,0s) both,people-step 3.1s ease-in-out 1.1s infinite}
.section-motion-active .worklife-scene img{animation:scene-breathe 7s ease-in-out infinite;transform-origin:50% 82%}
.section-motion-active .island-photo.is-arrived{animation:art-arrive 1.1s var(--ease) var(--motion-delay,0s) both,island-float 6s ease-in-out 1.2s infinite}
.section-motion-active .mobility-car{animation-duration:5s}
.section-motion-active .mobility-bus{animation-duration:6s}
.section-motion-active .mobility-ferry{animation-duration:10s}
@keyframes work-engine{0%,100%{translate:0 0;rotate:-.7deg}50%{translate:0 -4px;rotate:.7deg}}
@keyframes mechanic-work{0%,100%{rotate:-2deg;translate:0 0}35%,65%{rotate:2deg;translate:3px -2px}}
@keyframes tool-spark{0%,35%,100%{opacity:0;scale:.3;rotate:0deg}50%,65%{opacity:1;scale:1.15;rotate:35deg}}
@keyframes postcard-drift{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -7px;rotate:1deg}}
@keyframes people-step{0%,100%{translate:0 0;rotate:-2deg}50%{translate:4px -7px;rotate:2deg}}
@keyframes scene-breathe{0%,100%{scale:1}50%{scale:1.055}}
@keyframes island-float{0%,100%{translate:0 0;rotate:-.4deg}50%{translate:0 -5px;rotate:.4deg}}
@media(prefers-reduced-motion:reduce){.section-motion-active .work-car,.section-motion-active .work-person,.section-motion-active .work-visual::after,.section-motion-active .worklife-card,.section-motion-active .story-image,.section-motion-active .worklife-scene img,.section-motion-active .island-photo{animation:none!important;translate:none;rotate:none;scale:1}}