/* ========================================================================== splash.css - intro splash overlay for index.html (English) only. Self-contained. Linked ONLY from index.html. Does not touch style.css/ko.html. Class-prefixed: .splash-* (structure) and .lg-* (ported liquid-glass button). ========================================================================== */ /* No-JS users must NEVER see the splash: hidden by default, revealed only when the has synchronously added html.js-on. So JS users get the intro with no flash of the landing, and no-JS users land directly. */ .splash-screen{ display:none; } html.js-on .splash-screen{ display:flex; position:fixed; inset:0; z-index:9999; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:#567366; /* mid cool mint base behind the generated texture */ opacity:1; transition:opacity .6s ease; } /* Fallback dismiss fade (used when gradient masks are unsupported) */ .splash-screen.splash-out{ opacity:0; } /* Water-ripple rings riding the reveal wavefront (spawned by splash.js on Welcome click). Scaled per frame alongside the growing mask hole. */ .splash-ripple{ position:absolute; width:100px; height:100px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); box-shadow:0 0 22px rgba(214,244,232,.55), inset 0 0 18px rgba(214,244,232,.35); pointer-events:none; transform:translate(-50%,-50%) scale(0); will-change:transform,opacity; } /* (a) Background refraction target: the generated mint texture, full-cover. In SVG mode JS applies filter:url(#splash-lg-N) to THIS layer. */ .splash-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background-position:center; background-size:cover; background-repeat:no-repeat; } /* (c) Centered content column: logo + Welcome button. Tight ~24px gap and a small quiet lockup, following the reference intro's compact center cluster. */ .splash-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; } /* Logo loading reveal, bulletproof: two real copies of the lockup. An ALWAYS renders -- unlike CSS mask, which some Chrome contexts (notably file:// CORS) refuse to fetch, leaving the element fully invisible. Ghost = faint gray full logo underneath; fill = brand-color logo wiped in left->right via clip-path (pure geometry, no resource fetch). If the animation cannot run, the fill's base state has no clip -> logo fully visible. */ .splash-logo{ position:relative; width:min(280px,64vw); } .splash-logo img{ display:block; width:100%; height:auto; } .splash-logo-ghost{ opacity:.15; } /* faint white ghost (white asset, no filter) */ /* Loading timeline: 0.5s hold (ghost only) -> 3s wipe -> Welcome fades in. */ .splash-logo-fill{ position:absolute; inset:0; /* Liquid-glass rendering of the strokes (white asset): translucent frosted body, soft dark under-shadow, light top edge. Shadows hug the glyphs, so the moving reveal edge only ever shows inside the letterforms; the wide glow lives on .splash-logo-glow (unclipped, fades in when loading ends). */ filter:drop-shadow(0 1px 1px rgba(2,58,56,.30)) drop-shadow(0 2.5px 3.5px rgba(2,58,56,.28)) drop-shadow(0 -1px 1px rgba(255,255,255,.95)); opacity:.88; animation:splashLogoWipe 3s cubic-bezier(.22,.61,.36,1) .5s both; } /* Negative insets: clip-path clips AFTER filter, so a 0-inset box would slice the shadows at the image rectangle (the old "square boundary"). The -36px margins give them room; only the moving right edge (the reveal front) cuts. */ @keyframes splashLogoWipe{ from{ clip-path:inset(-36px 100% -36px -36px); } to{ clip-path:inset(-36px -36px -36px -36px); } } /* Luminous glow layer: identical white lockup with only the wide glow, never clipped; it breathes in as the wipe lands (3.5s) alongside the button. */ .splash-logo-glow{ position:absolute; inset:0; filter:drop-shadow(0 0 16px rgba(214,244,232,.55)); opacity:0; animation:splashGlowIn .8s ease 3.5s forwards; } @keyframes splashGlowIn{ from{ opacity:0; } to{ opacity:.88; } } /* ========================================================================== Welcome button - same look as the site's dock pills (.pill in scenes.css, light-scene tone: translucent white + hairline ink border + blur). The liquid-glass engine styling was retired with this pivot (reference kept at _gen/incoming/liquid-glass-reference.tsx). ========================================================================== */ .lg-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; /* buttons do NOT inherit the body font (UA default is Arial-ish); set the same serif the whole site uses so the label matches the dock pills */ font-family:Georgia,"Times New Roman",serif; padding:9px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.62); background:transparent; /* luminous outer glow, matching the logo's finale */ box-shadow:0 0 8px rgba(214,244,232,.45), 0 0 26px rgba(214,244,232,.30); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease,transform .2s ease; -webkit-user-select:none; user-select:none; } .lg-btn:hover{ transform:translateY(-1px); } /* Rim glare: a soft light glint that drifts slowly around the border, like light catching the edge of glass. Appears with the button (child of it, so the entrance fade covers it). Browsers without @property show it static. */ @property --glare{ syntax:''; inherits:false; initial-value:0deg; } .splash-enter::before{ content:""; position:absolute; inset:-1px; /* sits exactly on the 1px border */ border-radius:inherit; padding:1px; /* ring thickness = border width */ background:conic-gradient(from var(--glare,0deg) at 50% 50%, rgba(255,255,255,0) 0deg, rgba(255,255,255,1) 46deg, rgba(214,244,232,.55) 96deg, rgba(255,255,255,0) 150deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation:splashGlare 5.5s linear infinite; } @keyframes splashGlare{ from{ --glare:0deg; } to{ --glare:360deg; } } /* Welcome appears only after the load completes (0.5s hold + 3s wipe). Opacity-only animation so the fill-forwards state never blocks the :active transform. Clickability is enabled by JS on the same schedule. */ .splash-enter{ opacity:0; pointer-events:none; animation:splashBtnIn .7s cubic-bezier(.2,.7,.3,1) 3.55s forwards; } @keyframes splashBtnIn{ from{ opacity:0; } to{ opacity:1; } } /* Label with hover text roll (reference technique): per-letter spans in a 1em clip window; the duplicate row is each glyph's own text-shadow exactly 1em below. Hover lifts each letter -100% with a small stagger, so the shadow copy rolls up into view. */ .lg-label{ position:relative; display:inline-flex; overflow:hidden; font-size:13px; font-weight:400; color:rgba(255,255,255,.95); text-shadow:0 1em 0 currentColor, /* the rolling duplicate row */ 0 0 9px rgba(214,244,232,.5); /* soft label glow */ pointer-events:none; -webkit-user-select:none; user-select:none; } .lg-label > span{ display:block; line-height:1em; white-space:pre; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateY(0); transition:transform .5s cubic-bezier(.76,0,.24,1); } .lg-btn:hover .lg-label > span{ transform:translateY(-100%); } .lg-label > span:nth-child(1){ transition-delay:0ms; } .lg-label > span:nth-child(2){ transition-delay:26ms; } .lg-label > span:nth-child(3){ transition-delay:52ms; } .lg-label > span:nth-child(4){ transition-delay:78ms; } .lg-label > span:nth-child(5){ transition-delay:104ms; } .lg-label > span:nth-child(6){ transition-delay:130ms; } .lg-label > span:nth-child(7){ transition-delay:156ms; } /* Loading counter, bottom-right: quiet serif-italic numeral counting 0->100 during the logo wipe (reference-style; driven in splash.js). */ .splash-count{ position:absolute; right:clamp(24px,4vw,48px); bottom:clamp(22px,4vh,40px); z-index:1; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; font-size:24px; /* Liquid-glass numeral: same relief recipe as the logo strokes. */ color:rgba(255,255,255,.85); text-shadow:0 1px 1px rgba(2,58,56,.30), 0 2.5px 3.5px rgba(2,58,56,.28), 0 -1px 1px rgba(255,255,255,.6), 0 0 12px rgba(214,244,232,.4); /* matching soft glow */ pointer-events:none; } /* Reduced motion: no opacity fade, no sweep (JS pins --p=100% at once). */ @media (prefers-reduced-motion: reduce){ html.js-on .splash-screen{ transition:none; } .splash-logo-fill{ animation:none; } /* no wipe; show the full logo at once */ .splash-logo-glow{ animation:none; opacity:.88; } /* glow on immediately */ .splash-enter{ animation:none; opacity:1; pointer-events:auto; } /* button usable at once */ .splash-enter::before{ animation:none; } /* static rim glare */ .lg-label > span{ transition:none; } .lg-btn:hover .lg-label > span{ transform:none; } /* no text roll */ }