/* STORY-OPENING-001 — split-screen MarineOS brand opening. */ #marineos-story-opening[hidden],#marineos-story-opening [hidden]{display:none!important} #marineos-story-opening{--mos-story-background:#111820;--mos-story-duration:1200ms;position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:2147480000;overflow:hidden;isolation:isolate;background:var(--mos-story-background);color:#fff;box-sizing:border-box;display:block;text-align:center;opacity:1;visibility:visible;contain:layout style paint} #marineos-story-opening *,#marineos-story-opening *:before,#marineos-story-opening *:after{box-sizing:border-box} #marineos-story-opening .mos-story-scene{position:absolute;inset:0;overflow:hidden;background:var(--mos-story-background);pointer-events:none} #marineos-story-opening .mos-story-pair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:0;opacity:0} #marineos-story-opening .mos-story-pair:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.55),rgba(255,255,255,.06));box-shadow:0 0 30px rgba(255,255,255,.28);z-index:3} #marineos-story-opening .mos-story-pane{position:relative;overflow:hidden;background:var(--mos-story-background)} #marineos-story-opening .mos-story-pane:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 35%,rgba(0,0,0,.10));z-index:2} #marineos-story-opening .mos-story-pane-inner{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center;transform:translateZ(0) scale(1.06)} #marineos-story-opening .mos-story-pair.is-showing{opacity:1} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane--left{animation:mosStorySplitLeftIn var(--mos-story-duration) cubic-bezier(.22,1,.36,1) both} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane--right{animation:mosStorySplitRightIn var(--mos-story-duration) cubic-bezier(.22,1,.36,1) both} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane-inner{animation:mosStorySplitZoom var(--mos-story-step,2400ms) cubic-bezier(.22,1,.36,1) both} #marineos-story-opening .mos-story-pair.is-outgoing{opacity:1;animation:mosStoryPairOut var(--mos-story-duration) cubic-bezier(.22,1,.36,1) both} #marineos-story-opening .mos-story-shade{position:absolute;inset:0;z-index:4;background:radial-gradient(circle at center,rgba(0,0,0,.08) 0,rgba(0,0,0,.20) 55%,rgba(0,0,0,.48) 100%),linear-gradient(90deg,rgba(3,7,14,.36) 0,rgba(0,0,0,.02) 50%,rgba(3,7,14,.36) 100%)} #marineos-story-opening .mos-story-content{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:clamp(14px,3vh,32px);padding:8vh clamp(26px,5vw,84px);text-align:center;pointer-events:none;text-shadow:0 2px 25px rgba(0,0,0,.65)} #marineos-story-opening .mos-story-overline{color:#fff;font-weight:650;letter-spacing:.38em;font-family:system-ui,sans-serif;font-size:clamp(10px,1vw,13px);opacity:0;transform:translateY(20px);transition:opacity .65s .2s,transform .85s .2s} #marineos-story-opening .mos-story-brand{display:block;max-width:min(95vw,1150px);font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif;font-weight:900;line-height:1.16;font-size:clamp(48px,10vw,172px);letter-spacing:.04em;overflow-wrap:anywhere;opacity:0;transform:translateY(45px);transition:opacity .75s .25s,transform 1.2s cubic-bezier(.22,1,.36,1) .25s} #marineos-story-opening .mos-story-logo{display:block;max-width:min(72vw,770px);max-height:min(38dvh,370px);object-fit:contain;opacity:0;transform:translateY(45px) scale(.93);filter:drop-shadow(0 15px 40px rgba(0,0,0,.4));transition:opacity .75s .25s,transform 1.2s cubic-bezier(.22,1,.36,1) .25s} #marineos-story-opening .mos-story-headline{display:flex;max-width:85vw;justify-content:center;flex-wrap:wrap;font-weight:650;letter-spacing:.18em;line-height:1.75;font-size:clamp(15px,2.3vw,25px);opacity:0;transform:translateY(24px);transition:opacity .85s .5s,transform .9s .5s} #marineos-story-opening .mos-story-char{display:inline-block;opacity:0;visibility:hidden;transform:none;filter:none} #marineos-story-opening .mos-story-char.is-space{min-width:.38em} #marineos-story-opening .mos-story-headline .mos-story-char.is-visible{opacity:1;visibility:visible} #marineos-story-opening .mos-story-char.is-newline{flex-basis:100%;height:0} #marineos-story-opening .mos-story-headline{white-space:pre-line} #marineos-story-opening .mos-story-track{display:block;position:relative;width:min(280px,52vw);height:1px;background:rgba(255,255,255,.4);opacity:0;overflow:hidden;transition:opacity .4s .85s} #marineos-story-opening .mos-story-track span{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left} #marineos-story-opening.is-active .mos-story-overline,#marineos-story-opening.is-active .mos-story-brand,#marineos-story-opening.is-active .mos-story-headline,#marineos-story-opening.is-active .mos-story-logo,#marineos-story-opening.is-active .mos-story-track{opacity:1;transform:none} #marineos-story-opening.is-active .mos-story-track span{animation:mosStoryProgress var(--mos-story-total,3000ms) linear forwards} #marineos-story-opening .mos-story-skip{position:absolute;z-index:12;right:clamp(18px,4vw,60px);bottom:clamp(19px,4vh,40px);padding:13px 17px;min-width:99px;min-height:44px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(0,0,0,.32);color:#fff;cursor:pointer;line-height:1.25;letter-spacing:.2em;font:700 12px/1.2 system-ui,sans-serif;backdrop-filter:blur(6px);transition:background .2s,transform .2s} #marineos-story-opening .mos-story-skip:hover{background:rgba(0,0,0,.78);transform:translateY(-2px)} #marineos-story-opening .mos-story-skip:focus-visible{outline:3px solid #ffdf72;outline-offset:3px} #marineos-story-opening.is-leaving{pointer-events:none;animation:mosStoryExit .35s cubic-bezier(.76,0,.24,1) both} @keyframes mosStorySplitLeftIn{from{transform:translateY(-108%)}to{transform:translateY(0)}} @keyframes mosStorySplitRightIn{from{transform:translateY(108%)}to{transform:translateY(0)}} @keyframes mosStorySplitTopLeftIn{from{transform:translateX(-108%)}to{transform:translateX(0)}} @keyframes mosStorySplitBottomRightIn{from{transform:translateX(108%)}to{transform:translateX(0)}} @keyframes mosStorySplitZoom{from{transform:translateZ(0) scale(1.06)}to{transform:translateZ(0) scale(1.00)}} @keyframes mosStoryPairOut{from{opacity:1}to{opacity:0}} @keyframes mosStoryProgress{to{transform:scaleX(1)}} @keyframes mosStoryExit{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5%);visibility:hidden}} @media(max-width:767px){#marineos-story-opening .mos-story-pair{grid-template-columns:1fr;grid-template-rows:1fr 1fr}#marineos-story-opening .mos-story-pair:before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.55),rgba(255,255,255,.06))}#marineos-story-opening .mos-story-pair.is-showing .mos-story-pane--left{animation:mosStorySplitTopLeftIn var(--mos-story-duration) cubic-bezier(.22,1,.36,1) both}#marineos-story-opening .mos-story-pair.is-showing .mos-story-pane--right{animation:mosStorySplitBottomRightIn var(--mos-story-duration) cubic-bezier(.22,1,.36,1) both}#marineos-story-opening .mos-story-content{padding:9vh 24px 10vh;gap:22px}#marineos-story-opening .mos-story-brand{font-size:clamp(45px,13vw,85px);letter-spacing:.025em}#marineos-story-opening .mos-story-logo{max-width:85vw;max-height:24dvh}#marineos-story-opening .mos-story-headline{max-width:90vw;font-size:clamp(14px,4vw,19px);letter-spacing:.07em;line-height:1.6}#marineos-story-opening .mos-story-overline{letter-spacing:.23em;font-size:10px}#marineos-story-opening .mos-story-track{width:min(220px,58vw)}#marineos-story-opening .mos-story-skip{right:16px;bottom:18px;padding:12px 15px;min-width:90px}} @media(prefers-reduced-motion:reduce){#marineos-story-opening .mos-story-pair,#marineos-story-opening .mos-story-pane,#marineos-story-opening .mos-story-pane-inner,#marineos-story-opening .mos-story-content>*{animation:none!important;transition:none!important}} #marineos-story-opening.is-active .mos-story-pane{will-change:transform} #marineos-story-opening .mos-story-pane-inner{backface-visibility:hidden} #marineos-story-opening .mos-story-skip{touch-action:manipulation} @media(prefers-reduced-motion:reduce){#marineos-story-opening .mos-story-pair.is-showing{opacity:1!important}#marineos-story-opening .mos-story-pane{transform:none!important}#marineos-story-opening .mos-story-pane-inner{transform:none!important}} /* 1.1.44 cinematic refinement: scoped to the opt-in opening only. */ #marineos-story-opening .mos-story-pair{z-index:1} #marineos-story-opening .mos-story-pair.is-outgoing{z-index:2;animation:mosStoryCinematicOut var(--mos-story-blend,650ms) var(--mos-story-blend-delay,120ms) ease-in both} #marineos-story-opening .mos-story-pane-inner{transform:translateZ(0) scale(1.035)} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane-inner{animation:mosStoryCinematicZoom var(--mos-story-step,2400ms) cubic-bezier(.22,1,.36,1) both} #marineos-story-opening .mos-story-logo{transform:translateY(20px) scale(.948);transition:opacity var(--mos-story-reveal,980ms) ease var(--mos-story-logo-delay,620ms),transform var(--mos-story-reveal,980ms) cubic-bezier(.16,1,.3,1) var(--mos-story-logo-delay,620ms);will-change:opacity,transform,filter} #marineos-story-opening .mos-story-brand{transform:translateY(20px) scale(.968);transition:opacity var(--mos-story-reveal,980ms) ease var(--mos-story-logo-delay,620ms),transform var(--mos-story-reveal,980ms) cubic-bezier(.16,1,.3,1) var(--mos-story-logo-delay,620ms);will-change:opacity,transform,text-shadow} #marineos-story-opening .mos-story-overline{transition:opacity var(--mos-story-reveal,850ms) ease var(--mos-story-logo-delay,550ms),transform var(--mos-story-reveal,850ms) ease var(--mos-story-logo-delay,550ms)} #marineos-story-opening .mos-story-headline{transform:translateY(20px);transition:opacity var(--mos-story-reveal,850ms) ease var(--mos-story-copy-delay,880ms),transform var(--mos-story-reveal,850ms) cubic-bezier(.16,1,.3,1) var(--mos-story-copy-delay,880ms)} #marineos-story-opening .mos-story-track{transition:opacity .3s ease var(--mos-story-copy-delay,880ms)} #marineos-story-opening.is-leaving{animation:mosStoryCinematicExit var(--mos-story-exit-time,500ms) cubic-bezier(.36,0,.66,1) both;pointer-events:none} #marineos-story-opening.is-leaving .mos-story-skip{visibility:hidden} @keyframes mosStoryCinematicZoom{from{transform:translateZ(0) scale(1.045)}to{transform:translateZ(0) scale(1)}} @keyframes mosStoryCinematicOut{from{opacity:1}to{opacity:0}} @keyframes mosStoryCinematicExit{from{opacity:1}to{opacity:0;visibility:hidden}} @media(max-width:767px){ #marineos-story-opening .mos-story-content{padding-top:max(10vh,env(safe-area-inset-top));padding-bottom:max(10vh,env(safe-area-inset-bottom))} #marineos-story-opening .mos-story-logo{max-height:26svh;max-height:26dvh;max-width:84vw} #marineos-story-opening .mos-story-skip{bottom:max(18px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right))} #marineos-story-opening .mos-story-headline{overflow-wrap:anywhere;text-wrap:balance} } @media(prefers-reduced-motion:reduce){ #marineos-story-opening .mos-story-pair.is-outgoing,#marineos-story-opening.is-leaving{animation:none!important} #marineos-story-opening.is-active .mos-story-content>*{opacity:1!important;transform:none!important} #marineos-story-opening .mos-story-logo,#marineos-story-opening .mos-story-brand,#marineos-story-opening .mos-story-headline{transition:none!important} } /* 1.1.45 VISUAL STAGING: stronger yet restrained cinematic identity and framing. * The split axes remain unchanged. No canvas, filters, or external libraries. */ #marineos-story-opening::before, #marineos-story-opening::after{content:"";position:absolute;left:0;right:0;height:clamp(10px,1.9dvh,22px);z-index:9;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(2,7,17,.96),rgba(7,15,26,.91) 50%,rgba(2,7,17,.96));} #marineos-story-opening::before{top:0;transform:translateY(-100%)} #marineos-story-opening::after{bottom:0;transform:translateY(100%)} #marineos-story-opening.is-active::before{animation:mosStoryApertureTop var(--mos-story-aperture,600ms) cubic-bezier(.19,1,.22,1) both} #marineos-story-opening.is-active::after{animation:mosStoryApertureBottom var(--mos-story-aperture,600ms) cubic-bezier(.19,1,.22,1) both} #marineos-story-opening.is-leaving::before,#marineos-story-opening.is-leaving::after{animation:mosStoryApertureExit var(--mos-story-exit-time,700ms) ease-out both} #marineos-story-opening .mos-story-pair.is-showing::before{animation:mosStorySeamGlimmer var(--mos-story-duration,1200ms) ease-out both} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane-inner{animation:mosStoryPremierZoom var(--mos-story-step,2400ms) cubic-bezier(.16,1,.29,1) both} #marineos-story-opening.is-active .mos-story-logo:not([hidden]){animation:mosStoryIdentityLand var(--mos-story-reveal,1350ms) cubic-bezier(.16,1,.3,1) var(--mos-story-logo-delay,680ms) both;transition:none} #marineos-story-opening.is-active .mos-story-brand:not([hidden]){animation:mosStoryIdentityLand var(--mos-story-reveal,1350ms) cubic-bezier(.16,1,.3,1) var(--mos-story-logo-delay,680ms) both;transition:none} #marineos-story-opening.is-active .mos-story-headline:not([hidden]){opacity:1;transform:none;animation:none;transition:none} /* Characters are revealed by the opening timer, not a 1ms CSS endpoint. */ #marineos-story-opening.is-leaving .mos-story-logo:not([hidden]), #marineos-story-opening.is-leaving .mos-story-brand:not([hidden]), #marineos-story-opening.is-leaving .mos-story-headline:not([hidden]), #marineos-story-opening.is-leaving .mos-story-overline, #marineos-story-opening.is-leaving .mos-story-track{animation:mosStoryIdentityLeave var(--mos-story-exit-time,700ms) ease-in both;transition:none} @keyframes mosStoryApertureTop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}} @keyframes mosStoryApertureBottom{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}} @keyframes mosStoryApertureExit{from{opacity:1}to{opacity:0}} @keyframes mosStorySeamGlimmer{0%,18%{opacity:0}54%{opacity:.82}100%{opacity:.43}} @keyframes mosStoryPremierZoom{from{transform:translateZ(0) scale(1.075)}to{transform:translateZ(0) scale(1)}} @keyframes mosStoryIdentityLand{from{opacity:0;transform:translateY(46px) scale(1.12)}72%{opacity:1;transform:translateY(-2px) scale(1.015)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes mosStoryCaptionLand{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}} @keyframes mosStoryLogoAura{0%{filter:drop-shadow(0 14px 34px rgba(0,0,0,.42)) drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 16px 36px rgba(0,0,0,.44)) drop-shadow(0 0 14px rgba(255,255,255,.16))}100%{filter:drop-shadow(0 18px 42px rgba(0,0,0,.48)) drop-shadow(0 0 24px rgba(176,229,255,.24))}} @keyframes mosStoryBrandAura{0%{text-shadow:0 2px 25px rgba(0,0,0,.65),0 0 0 rgba(255,255,255,0)}50%{text-shadow:0 2px 25px rgba(0,0,0,.68),0 0 10px rgba(255,255,255,.13)}100%{text-shadow:0 2px 25px rgba(0,0,0,.7),0 0 22px rgba(168,222,255,.22)}} @keyframes mosStoryIdentityLeave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}} @media(max-width:767px){ #marineos-story-opening::before,#marineos-story-opening::after{height:clamp(7px,1.1dvh,12px)} #marineos-story-opening .mos-story-pair.is-showing::before{animation:mosStorySeamGlimmer var(--mos-story-duration,1200ms) ease-out both} } @media(prefers-reduced-motion:reduce){ #marineos-story-opening::before,#marineos-story-opening::after{display:none!important} #marineos-story-opening .mos-story-pair.is-showing::before{animation:none!important} #marineos-story-opening.is-active .mos-story-logo:not([hidden]), #marineos-story-opening.is-active .mos-story-brand:not([hidden]), #marineos-story-opening.is-active .mos-story-headline:not([hidden]), #marineos-story-opening.is-leaving .mos-story-content>*{animation:none!important;transition:none!important;opacity:1!important;transform:none!important} #marineos-story-opening .mos-story-headline .mos-story-char{animation:none!important;opacity:1!important;transform:none!important;filter:none!important} #marineos-story-opening .mos-story-pair.is-showing .mos-story-pane-inner{animation:none!important;transform:none!important} } /* 1.1.47: an actual luminous layer BEHIND the central identity, not just a faint PNG outline. * Fixed gradients; animate only opacity/transform, no full-screen blur/canvas. */ #marineos-story-opening .mos-story-content{isolation:isolate} #marineos-story-opening .mos-story-content>*{position:relative;z-index:1} #marineos-story-opening .mos-story-content::before, #marineos-story-opening .mos-story-content::after{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;top:47%;border-radius:50%;width:min(86vw,940px);height:min(47vw,470px);opacity:0;transform:translate(-50%,-50%) scale(.76)} #marineos-story-opening .mos-story-content::before{background:radial-gradient(ellipse at center,rgba(242,251,255,.48) 0%,rgba(130,216,255,.36) 20%,rgba(41,132,218,.19) 48%,transparent 74%)} #marineos-story-opening .mos-story-content::after{width:min(69vw,710px);height:min(34vw,370px);background:radial-gradient(ellipse at center,rgba(230,249,255,.34),rgba(118,215,255,.17) 42%,transparent 72%)} #marineos-story-opening.is-active .mos-story-content::before{animation:mosStoryAuraEnter 1100ms cubic-bezier(.16,1,.3,1) var(--mos-story-aura-delay,1900ms) both} #marineos-story-opening.is-active .mos-story-content::after{animation:mosStoryAuraBreathe 3000ms ease-in-out var(--mos-story-aura-delay,1900ms) infinite alternate} @keyframes mosStoryAuraEnter{from{opacity:0;transform:translate(-50%,-50%) scale(.76)}to{opacity:.86;transform:translate(-50%,-50%) scale(1)}} @keyframes mosStoryAuraBreathe{from{opacity:.12;transform:translate(-50%,-50%) scale(.91)}to{opacity:.68;transform:translate(-50%,-50%) scale(1.08)}} @media(max-width:767px){ #marineos-story-opening .mos-story-content::before{width:106vw;height:min(55dvh,370px)} #marineos-story-opening .mos-story-content::after{width:92vw;height:min(41dvh,270px)} } /* Admin iframe only. Visible evidence that 1.1.48 CSS AND JS are running. */ #marineos-story-opening[data-preview="1"][data-opening-engine="1.1.48"].is-active .mos-story-skip::before{content:"演出版 1.1.48 読込済";position:absolute;right:0;bottom:calc(100% + 9px);white-space:nowrap;font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.05em;color:#fff;background:rgba(2,18,32,.82);border:1px solid rgba(214,242,255,.45);border-radius:6px;padding:5px 9px;pointer-events:none} @media(prefers-reduced-motion:reduce){ #marineos-story-opening .mos-story-content::before, #marineos-story-opening .mos-story-content::after{animation:none!important;opacity:0!important} #marineos-story-opening .mos-story-headline .mos-story-char{visibility:visible!important} }