/* show⁺X 공통 — 스타일 전체. index.html 에서 뽑아냄, 로직 변경 없음. */ :root{--font-lang:sans-serif} html[lang="ko"]{--font-lang:'Noto Sans KR'} html[lang="ja"]{--font-lang:'Noto Sans JP'} html[lang="zh-CN"]{--font-lang:'Noto Sans SC'} html[lang="zh-TW"]{--font-lang:'Noto Sans TC'} html[lang="th"]{--font-lang:'Noto Sans Thai'} html[lang="vi"]{--font-lang:'Be Vietnam Pro'} html[lang="ar"]{--font-lang:'Noto Sans Arabic'} html[lang="hi"]{--font-lang:'Noto Sans Devanagari'} html[lang="ru"]{--font-lang:'Noto Sans'} html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{font-weight:700} html{scroll-behavior:smooth} html{overflow-x:hidden} /* overflow-x:hidden would make a scroll container and that kills position:sticky for the hero. `clip` cuts the overflow without creating one. */ body{background:#08070c;color:#ededf3;font-family:'Sora',var(--font-lang),sans-serif;overflow-x:clip} /* Lower sections - flat neutral backgrounds, alternating stripes only for rhythm (purple is reserved for accents) */ #equation,#stages,#wallet{background:#141419} section,header,footer{overflow:hidden} /* the hero pins itself - an overflow:hidden ancestor would kill position:sticky */ #top{overflow:visible} a{color:#ededf3;text-decoration:none} a:hover{color:#9446ff} .font-display{font-family:'Anton',var(--font-lang),sans-serif} .grad-text{background:linear-gradient(92deg,#d8baff 10%,#9446ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradShift 6s ease-in-out infinite} @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .glass{background:rgba(255,255,255,.045);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.10);transition:border-color .35s,box-shadow .35s,transform .35s} .glass-hover:hover{border-color:rgba(148,70,255,.45);box-shadow:0 0 40px rgba(148,70,255,.18);transform:translateY(-4px)} .blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;animation:blobDrift 18s ease-in-out infinite} section:nth-of-type(even) .blob{animation-duration:24s;animation-delay:-10s} .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none;filter:blur(0)} .aperture-spin{animation:apspin 40s linear infinite} @keyframes apspin{to{transform:rotate(360deg)}} .floaty{animation:floaty 7s ease-in-out infinite} .floaty2{animation:floaty 9s ease-in-out -3s infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} ::selection{background:#9446ff;color:#fff} .lang-panel{max-height:min(420px,60vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(148,70,255,.4) transparent} /* HERO - one cinematic plate behind the brand aperture. Both are driven by --sy (scroll through the first viewport) and --mx/--my (pointer), set once per frame in JS below. */ #top{--sy:0;--mx:0;--my:0} /* The hero is a track, not a screen. The stage sticks while the page scrolls past it, and that scroll distance is what the video is scrubbed against. */ .hero-track{height:420vh} .hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;justify-content:center} @media(max-width:900px){.hero-track{height:300vh}} @media(prefers-reduced-motion:reduce){.hero-track{height:100vh}} .hero-stage{position:absolute;inset:0;overflow:hidden} /* The plate is a centred stage. Scale it up and push it right so the stage itself lands in the right column and the left 40% falls off into black - that empty side is the type area. The trailing translateX runs inside the scaled space. */ /* The plate already contains the aperture - show it at its own framing, no crop-and-shove. Only a hair of scale so the parallax never exposes an edge. */ .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:1; transform:translate3d(calc(var(--mx) * -10px),calc(var(--my) * -7px + var(--sy) * 5vh),0) scale(calc(1.04 + var(--sy) * .16)); will-change:transform,opacity} /* The plate itself is only ~10% violet - measured. `color` blending keeps its luminosity and takes the hue from the brand, so any backdrop lands on tone. */ /* Left half carries the copy, so the plate gets a scrim on that side only - the right half stays bright enough for the mark to sit in. */ /* Only the type side gets pressed down. The right half of the plate stays untouched. */ .hero-scrim{position:absolute;inset:0; background:linear-gradient(95deg,rgba(8,7,12,.92) 0%,rgba(8,7,12,.74) 26%, rgba(8,7,12,.34) 46%,transparent 64%)} /* split layout - copy left, mark right */ .hero-grid{position:relative;z-index:10;width:100%;max-width:1240px;margin:0 auto; padding:96px 20px 72px;display:grid;align-items:center; grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(20px,4vw,56px)} .hero-copy{text-align:left; opacity:calc(1 - max(0, var(--sy) - .84) * 6.2); transform:translateY(calc(max(0, var(--sy) - .84) * -80px))} .hero-copy .daily{margin-left:0;margin-right:auto;text-align:left} .hero-copy .hero-rule{margin-left:0} .hero-copy .hero-title{text-wrap:balance;font-size:clamp(40px,5.4vw,78px)} html[lang="ko"] .hero-copy .hero-title{font-size:clamp(38px,5.2vw,74px)} html[lang="ja"] .hero-copy .hero-title{font-size:clamp(36px,5vw,70px)} html[lang="zh-CN"] .hero-copy .hero-title,html[lang="es"] .hero-copy .hero-title, html[lang="pt"] .hero-copy .hero-title,html[lang="fr"] .hero-copy .hero-title{font-size:clamp(36px,4.8vw,68px)} /* 세로 화면에서는 좌우로 가를 폭이 없다 — 로고·글·밑줄을 모두 가운데로 모은다. 왼쪽 정렬을 남기면 세로 영상의 중앙 구도와 축이 어긋나 보인다. */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:8px;padding:104px 22px 76px;justify-items:center} .hero-copy{order:2;text-align:center;width:100%;max-width:34rem; display:flex;flex-direction:column;align-items:center} .hero-copy .daily{margin-left:auto;margin-right:auto;text-align:center} .hero-copy .hero-logo{margin-left:auto;margin-right:auto} .hero-copy .hero-rule{margin-left:auto;margin-right:auto} .hero-copy .hero-title{text-align:center;margin-left:auto;margin-right:auto} .hero-scrim{background:linear-gradient(180deg,rgba(8,7,12,.52),rgba(8,7,12,.30) 42%,rgba(8,7,12,.86))} } /* full-bleed image band - used once, to break the longest section in half */ .band{margin:clamp(56px,8vw,88px) 0 0;position:relative;overflow:hidden;border-radius:18px} .band img{display:block;width:100%;height:clamp(200px,30vw,340px);object-fit:cover;opacity:.62} .band::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,7,12,.55),rgba(8,7,12,.12) 45%,rgba(8,7,12,.75))} .hero-overlay{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 0%,transparent 62%,rgba(8,7,12,.55) 84%,#08070c 100%)} .hero-logo{height:clamp(62px,13vw,82px);width:auto;filter:drop-shadow(0 6px 30px rgba(148,70,255,.45))} /* Quote of the day - sits above the wordmark, must stay quieter than it */ .daily{margin:0 0 clamp(40px,6vw,72px);max-width:44ch;text-align:center} .daily-q{font-family:'Sora',sans-serif;font-style:normal;font-weight:600; font-size:clamp(15px,1.9vw,21px);line-height:1.6;color:rgba(237,237,243,.72);margin:0} .daily-q::before{content:"\201C"} .daily-q::after{content:"\201D"} .daily-a{margin-top:.9rem;font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:500; letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:rgba(237,237,243,.38)} .daily-a::before{content:"— "} /* The one line the whole page is built on. A high-contrast didone italic - the thick/thin stroke is what makes it read as couture rather than as a heavy geometric sans. */ .hero-title{margin-top:1.6rem;font-family:'Sora',sans-serif;font-style:normal;font-weight:700; font-size:clamp(46px,8.6vw,112px);line-height:1.04;letter-spacing:-.005em;text-wrap:nowrap} /* the longer Romance translations cannot hold one line at that size - let them wrap */ html[lang="es"] .hero-title,html[lang="pt"] .hero-title,html[lang="fr"] .hero-title{font-size:clamp(40px,6.4vw,84px);text-wrap:balance} .hero-title span{display:inline-block;padding-bottom:.06em; background:linear-gradient(103deg,#ffffff 0%,#f0e4ff 22%,#c9a6ff 46%,#9446ff 70%,#e9d8ff 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:heroSheen 11s ease-in-out infinite;filter:drop-shadow(0 10px 44px rgba(148,70,255,.5))} @keyframes heroSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .hero-rule{width:clamp(56px,9vw,110px);height:1px;margin:1.9rem auto 0; background:linear-gradient(90deg,transparent,rgba(216,186,255,.65),transparent)} /* CJK has no italic didone - the equivalent register is Myeongjo / Mincho */ html[lang="ko"] .hero-title{font-family:'Nanum Myeongjo',serif;font-style:normal;font-weight:800;font-size:clamp(44px,9.5vw,104px);letter-spacing:-.02em;line-height:1.16} html[lang="ja"] .hero-title{font-family:'Shippori Mincho',serif;font-style:normal;font-weight:800;font-size:clamp(42px,9vw,98px);letter-spacing:-.02em;line-height:1.2} html[lang="zh-CN"] .hero-title{font-family:'Noto Serif SC',serif;font-style:normal;font-weight:700;font-size:clamp(44px,9.5vw,104px);letter-spacing:-.01em;line-height:1.18} /* HERO motion - staggered entrance with blur, drifting blobs, logo glow pulse (Supanova signature easing) */ @keyframes heroIn{from{opacity:0;transform:translateY(2rem);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}} .hero-enter{opacity:0} html.i18n-ready .hero-enter{animation:heroIn 1.2s cubic-bezier(.16,1,.3,1) both} @keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-22px) scale(1.07)}66%{transform:translate(-24px,18px) scale(.96)}} .blob-anim{animation:blobDrift 16s ease-in-out infinite} .blob-anim2{animation:blobDrift 20s ease-in-out -8s infinite} @keyframes logoPulse{0%,100%{filter:drop-shadow(0 6px 30px rgba(148,70,255,.45))}50%{filter:drop-shadow(0 8px 46px rgba(90,22,201,.6))}} html.i18n-ready .hero-logo.hero-enter{animation:heroIn 1.2s cubic-bezier(.16,1,.3,1) both,logoPulse 5.5s ease-in-out 1.4s infinite} /* Hero flourishes - halo pulse, sparkles, scroll cue */ @keyframes haloPulse{0%,100%{opacity:.7;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.12)}} .hero-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden} .sparkle{position:absolute;border-radius:50%;background:#d8baff;box-shadow:0 0 8px 2px rgba(216,186,255,.8);opacity:0;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite} @keyframes twinkle{0%,100%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.9;transform:translateY(-6px) scale(1)}45%{opacity:.25;transform:translateY(-14px) scale(.7)}70%{opacity:.8;transform:translateY(-22px) scale(1.05)}} .hero-scroll{position:absolute;left:50%;bottom:26px;z-index:10;color:rgba(255,255,255,.55);transform:translateX(-50%);animation:scrollBob 2.2s ease-in-out infinite} @keyframes scrollBob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}50%{transform:translateX(-50%) translateY(8px);opacity:1}} /* Statement panel - the one line in the philosophy section that must land alone */ .statement{position:relative;background:#0b0b0e;border:1px solid rgba(148,70,255,.18);overflow:hidden} .statement::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(148,70,255,.16),transparent 62%);pointer-events:none} .statement>*{position:relative} /* Lineage rail - the platform succession, show+X as the next slot */ .rail{position:relative} .rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(148,70,255,.55))} .node{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)} .node.is-now{width:15px;height:15px;background:linear-gradient(140deg,#d8baff,#9446ff);box-shadow:0 0 0 5px rgba(148,70,255,.16),0 0 22px rgba(148,70,255,.7);animation:nowPulse 3.4s ease-in-out infinite} @keyframes nowPulse{0%,100%{box-shadow:0 0 0 5px rgba(148,70,255,.16),0 0 22px rgba(148,70,255,.7)}50%{box-shadow:0 0 0 11px rgba(148,70,255,0),0 0 34px rgba(148,70,255,.9)}} /* The quotation - the one borrowed line on the page, so it is given a stage of its own */ .quote{position:relative;margin:0;padding:3.5rem 1rem 0;text-align:center;isolation:isolate} .quote-halo{position:absolute;left:50%;top:44%;width:min(760px,92%);height:300px;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;background:radial-gradient(closest-side,rgba(148,70,255,.22),rgba(148,70,255,.06) 55%,transparent 78%);animation:haloPulse 9s ease-in-out infinite} .quote-mark{position:absolute;font-family:'Anton',serif;font-weight:800;font-size:clamp(120px,17vw,210px);line-height:1;pointer-events:none;z-index:-1;background:linear-gradient(160deg,#d8baff,#9446ff 55%,transparent);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22} .quote-mark-open{left:2%;top:0} .quote-mark-close{right:2%;bottom:-.35em} /* Handwritten, as if signed by the person quoted - one script face per writing system */ .quote-line{margin:0 auto;max-width:20ch;font-family:'Great Vibes','Nanum Brush Script',cursive;font-weight:400; font-size:clamp(40px,8.5vw,86px);line-height:1.28;letter-spacing:.005em;padding-bottom:.12em; background:linear-gradient(96deg,#ffffff 4%,#e9d8ff 26%,#b78bff 58%,#9446ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent; background-size:220% 100%;animation:quoteShine 9s ease-in-out infinite;filter:drop-shadow(0 6px 34px rgba(148,70,255,.42))} html[lang="ko"] .quote-line{font-family:'Nanum Brush Script',cursive;font-size:clamp(34px,7.2vw,70px);line-height:1.34;max-width:16ch} html[lang="ja"] .quote-line{font-family:'Yuji Syuku',serif;font-size:clamp(28px,5.6vw,54px);line-height:1.5;max-width:18ch} html[lang="zh-CN"] .quote-line{font-family:'Zhi Mang Xing',cursive;font-size:clamp(34px,7vw,68px);line-height:1.4;max-width:16ch} /* Latin scripts share Great Vibes; it has a small x-height so it needs the extra size */ html[lang="es"] .quote-line,html[lang="pt"] .quote-line,html[lang="fr"] .quote-line{font-size:clamp(38px,8vw,80px);max-width:22ch} @keyframes quoteShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .quote-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2.5rem} .quote-rule i{display:block;height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,rgba(216,186,255,.55))} .quote-rule i:last-child{background:linear-gradient(90deg,rgba(216,186,255,.55),transparent)} .quote-rule span{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(140deg,#d8baff,#9446ff);box-shadow:0 0 14px rgba(148,70,255,.85)} .quote-by{margin-top:1.5rem;font-size:.72rem;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:rgba(237,237,243,.5)} @media(min-width:640px){.quote-by{font-size:.82rem}} /* show x X = infinity - set as a display equation, with the real glossy X standing in for the letter */ .formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,30px);margin-top:clamp(48px,7vw,84px)} .formula-op{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(22px,3.4vw,40px);line-height:1;color:rgba(237,237,243,.34)} .formula-inf{font-family:'Anton',sans-serif;font-weight:800;font-size:clamp(52px,9vw,108px);line-height:.8; background:linear-gradient(120deg,#d8baff,#9446ff 60%,#5a16c9);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 30px rgba(148,70,255,.6));animation:infPulse 5s ease-in-out infinite} @keyframes infPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(148,70,255,.45))}50%{filter:drop-shadow(0 0 46px rgba(148,70,255,.85))}} /* The three marks - real logo geometry, given room to breathe */ .mark-card{border-radius:1.5rem;padding:3rem 2rem 2.75rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px} .mark{width:clamp(76px,9vw,104px);height:auto;margin-bottom:2.25rem;overflow:visible} /* Typesetting - headings break into even lines, body avoids orphan words, CJK/Thai never split mid-word */ /* balance 는 제목용이다. 본문 문단에 걸면 줄마다 길이를 맞추려고 한가운데서 끊어 짧은 줄을 만든다 — 문단은 pretty(고아 단어만 정리)로 둔다. */ h1,h2,h3,blockquote,figcaption{text-wrap:balance} p{text-wrap:pretty} html[lang="ko"],html[lang="ja"],html[lang^="zh"],html[lang="th"]{word-break:keep-all;overflow-wrap:break-word;line-break:strict} .copy{max-width:62ch;margin-left:auto;margin-right:auto} .chip{border:1px solid rgba(255,255,255,.09);background:transparent;border-radius:99px;padding:.5rem 1.05rem; font-size:.8rem;letter-spacing:.01em;color:rgba(237,237,243,.5);transition:border-color .35s,color .35s} .chip:hover{border-color:rgba(148,70,255,.4);color:#ededf3} .chip-x{border-color:rgba(148,70,255,.4);color:rgba(237,237,243,.9)} /* Horizon - ruled milestones, the last one carrying the accent */ .milestone{position:relative;padding-top:1.6rem;text-align:left} .milestone::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.13)} .milestone .year{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.01em;color:rgba(237,237,243,.62)} .milestone .label{margin-top:.7rem;font-size:.85rem;line-height:1.7;color:rgba(237,237,243,.44)} .milestone-end::before{background:linear-gradient(90deg,rgba(148,70,255,.75),rgba(148,70,255,.1))} .milestone-end .year{font-size:clamp(1.5rem,2.6vw,2rem);background:linear-gradient(120deg,#d8baff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} .milestone-end .label{color:rgba(237,237,243,.72)} /* Ladder rungs - ruled rows, not boxes; the crowd behind each step grows with the number */ .rung{position:relative;overflow:hidden;min-height:84px;border:0;background:transparent;border-radius:0; border-top:1px solid rgba(255,255,255,.10);transition:none} .rung:last-child{border-bottom:1px solid rgba(255,255,255,.10)} .rung:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.10)} .rung-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .6s} .rung:hover .rung-bg{transform:scale(1.05)} .rung-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,12,.96) 0%,rgba(8,7,12,.80) 38%,rgba(8,7,12,.62) 66%,rgba(8,7,12,.92) 100%)} .rung .idx{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.3em;color:rgba(237,237,243,.32)} .rung .name{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.015em} .rung .qty{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1rem,2.4vw,1.75rem);letter-spacing:-.01em; background:linear-gradient(100deg,#e9d8ff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} .rung .unit{display:block;margin-top:.45rem;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(237,237,243,.42)} html[lang="ko"] .rung .unit,html[lang="ja"] .rung .unit,html[lang^="zh"] .rung .unit{font-family:inherit;font-size:11px;letter-spacing:.12em} /* The equation line - spaced out, with the result carrying the colour */ .eq-line{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:.24em; font-size:clamp(11px,1.5vw,15px);color:rgba(237,237,243,.42);text-transform:uppercase} .eq-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55em} .eq-line b{font-weight:500;color:rgba(237,237,243,.62)} .eq-line i{font-style:normal;color:rgba(237,237,243,.26)} .eq-line em{font-style:normal;background:linear-gradient(100deg,#d8baff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} /* Stage cards - image, hairline, caption. No container chrome. */ .stage-card{overflow:visible;border-radius:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .stage-card:hover{transform:none;box-shadow:none;border-color:transparent} .stage-card img{border-radius:.75rem;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .5s;opacity:.9} .stage-card:hover img{transform:translateY(-4px);opacity:1} .stage-card figcaption{padding:1.5rem 0 0;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)} .stage-card .head{display:flex;align-items:baseline;gap:.85rem} .stage-card .head span{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.3em;color:rgba(237,237,243,.34)} .stage-card .head h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em} .stage-card p{margin-top:.75rem;font-size:.875rem;line-height:1.85;color:rgba(237,237,243,.48)} @media(prefers-reduced-motion:reduce){.hero-enter,html.i18n-ready .hero-enter,.blob,.blob-anim,.blob-anim2,html.i18n-ready .hero-logo.hero-enter,.grad-text,.sparkle,.hero-scroll,.node.is-now{animation:none;opacity:1}.reveal{filter:none}} /* Philosophy expansion - the human axis. One spine, brightening as it descends: the further down, the larger and hotter the word. The last line is the payoff. */ .axis{position:relative;list-style:none;margin:0 auto;padding:0;max-width:660px; display:flex;flex-direction:column;align-items:center;gap:clamp(28px,3.6vw,46px)} .axis::before{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1px;translate:-50% 0; background:linear-gradient(180deg,rgba(148,70,255,.05),rgba(148,70,255,.34) 34%,rgba(216,186,255,.9))} /* a single light falls down the spine when the block comes into view */ .axis::after{content:"";position:absolute;left:50%;top:-26%;width:2px;height:26%;translate:-50% 0; background:linear-gradient(180deg,transparent,rgba(233,216,255,.95),transparent); filter:blur(1px);opacity:0;pointer-events:none} .reveal.in.axis::after{animation:axisRun 2.8s cubic-bezier(.42,0,.2,1) .35s} @keyframes axisRun{0%{opacity:0;top:-26%}14%{opacity:1}100%{opacity:0;top:104%}} .ax{--p:calc(var(--i) / 6);position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem; opacity:0;transform:translateY(16px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * .1s)} .reveal.in .ax{opacity:1;transform:none} /* the node sits on the spine, growing hotter with each step */ .ax::before{content:"";position:absolute;left:50%;top:calc(-1 * clamp(14px,1.8vw,23px)); width:7px;height:7px;translate:-50% -50%;rotate:45deg;background:#08070c; border:1px solid rgba(148,70,255,calc(.28 + var(--p) * .72)); box-shadow:0 0 calc(5px + var(--p) * 18px) rgba(148,70,255,calc(.12 + var(--p) * .6))} .ax:first-child::before{display:none} .ax-n{font-family:'Space Grotesk',sans-serif;font-size:9px;letter-spacing:.24em; color:rgba(216,186,255,calc(.16 + var(--p) * .44))} .ax-w{font-family:'Space Grotesk',var(--font-lang),sans-serif;font-weight:700; font-size:calc(11px + var(--p) * 10px); letter-spacing:calc(.24em + var(--p) * .05em); color:rgba(237,237,243,calc(.44 + var(--p) * .56)); text-shadow:0 0 calc(var(--p) * 28px) rgba(148,70,255,calc(var(--p) * .5))} .ax-s{font-family:'Sora',sans-serif;font-style:normal;text-align:center; font-size:calc(.9rem + var(--p) * .46rem);line-height:1.5; color:rgba(237,237,243,calc(.32 + var(--p) * .44))} html[lang="ko"] .ax-s,html[lang="ja"] .ax-s,html[lang="zh-CN"] .ax-s{ font-family:var(--font-lang),serif;font-style:normal} /* the last line is where the whole flow arrives */ .ax:last-child .ax-w{background:linear-gradient(92deg,#e9d8ff,#9446ff); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 26px rgba(148,70,255,.55))} @media(prefers-reduced-motion:reduce){ .ax{opacity:1;transform:none;transition:none} .reveal.in.axis::after{animation:none} } /* Concept card - philosopher stays an attribution, the idea is the headline */ .concept{position:relative;padding:1.9rem 1.6rem 1.7rem;border:1px solid rgba(255,255,255,.07); border-radius:1.1rem;background:rgba(255,255,255,.012);transition:border-color .4s} .concept:hover{border-color:rgba(148,70,255,.28)} .concept h3{font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .concept .attr{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:rgba(237,237,243,.34);margin-top:.5rem} .concept .say{margin-top:1rem;font-size:1.02rem;line-height:1.6;color:rgba(237,237,243,.86)} .concept .body{margin-top:.75rem;font-size:.92rem;line-height:1.85;color:rgba(237,237,243,.5)} /* Footer locations - set as a quiet mono line, one register below the tagline */ .footer-loc{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.55rem 1rem; font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:rgba(237,237,243,.34)} /* separators come from CSS so the list wraps without orphaned dots */ .footer-loc span{display:inline-flex;align-items:center} .footer-loc span:not(:last-child)::after{content:"·";margin-left:1rem;color:rgba(148,70,255,.7);letter-spacing:0} .drawer-link{padding:.6rem .7rem;border-radius:.65rem;transition:background .15s} .drawer-link:hover{background:rgba(255,255,255,.06)} /* NAV - marks on the dark, no panel. The hairline and blur arrive only after the hero. */ #siteNav{transition:background .5s ease,backdrop-filter .5s ease} #siteNav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:0;transition:opacity .5s ease; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)} #siteNav.is-scrolled{background:rgba(10,10,13,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} #siteNav.is-scrolled::after{opacity:1} /* 로고·메뉴·언어 세 덩어리가 좁은 폭에서 서로 밀고 들어가지 않게 — 양끝(로고·언어)은 줄어들지 않게 고정하고, 가운데 메뉴만 줄어들다가 넘치면 가로로 흐른다. */ .nav-inner{height:76px;gap:10px} .nav-inner > *:first-child,.nav-lang{flex:none} .nav-logo{height:40px;width:auto;opacity:.85;transition:opacity .35s} .nav-logo:hover{opacity:1} .nav-links{gap:clamp(.6rem,2.6vw,3.2rem);align-items:center;min-width:0;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav-links::-webkit-scrollbar{display:none} .nav-links a{white-space:nowrap} .nav-links a,.nav-lang{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,237,243,.4);transition:color .35s} .nav-links a:hover,.nav-lang:hover{color:#ededf3} .nav-lang{display:flex;align-items:center;gap:7px} /* 좁은 화면에서도 메뉴를 접지 않는다 — 항목이 셋뿐이라 들어간다. ⚠ 햄버거