/* ============================================================ ORIGINALS inc. — renewal stylesheet Monochrome brand (sumi #221815 / white / gray) + 1 accent. Directions are swapped via [data-direction] on . Accent swapped via --accent (set by Tweaks). ============================================================ */ :root { /* brand mono */ --sumi: #221815; /* warm near-black from brand book */ --sumi-80: #3a2f2b; --gray: #909090; /* brand gray */ --paper: #faf8f5; /* warm paper white */ --paper-2: #f1ede7; --white: #ffffff; /* accent (proposal — tweakable) */ --accent: #e0533b; /* 朱 vermillion */ --accent-ink: #ffffff; /* text that sits on accent */ /* semantic — overridden per direction */ --bg: var(--paper); --bg-2: var(--paper-2); --ink: var(--sumi); --ink-soft: #6f655f; --hair: rgba(34,24,21,.14); --hair-strong: rgba(34,24,21,.28); /* type */ --en: "Nunito Sans", system-ui, sans-serif; --jp: "Noto Sans JP", system-ui, sans-serif; /* rhythm */ --mx: clamp(20px, 6.2vw, 132px); /* page side margin */ --section-y: clamp(96px, 13vw, 220px); /* motion */ --rise: 42px; /* reveal travel */ --dur: .9s; /* reveal duration */ --ease: cubic-bezier(.16,.84,.32,1); --maxw: 1680px; } /* ---------- Direction B: Kinetic (dark) ---------- */ html[data-direction="b"] { --bg: #161210; --bg-2: #1d1815; --ink: #f5f1ec; --ink-soft: #a39a93; --hair: rgba(245,241,236,.14); --hair-strong: rgba(245,241,236,.30); --rise: 60px; --dur: 1.05s; } /* ---------- Direction C: Grid (light swiss) ---------- */ html[data-direction="c"] { --bg: #ffffff; --bg-2: #f4f2ef; --ink: var(--sumi); --ink-soft: #74695f; --hair: rgba(34,24,21,.16); --hair-strong: rgba(34,24,21,.34); --rise: 30px; --dur: .8s; } /* ---------- motion intensity ---------- */ html[data-motion="low"] { --rise: 16px; --dur: .6s; } html[data-motion="high"] { --rise: 80px; --dur: 1.25s; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--bg); color: var(--ink); font-family: var(--jp); font-weight: 400; line-height: 1.9; letter-spacing: .02em; overflow-x: hidden; transition: background .6s var(--ease), color .6s var(--ease); } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .en { font-family: var(--en); letter-spacing: .04em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--mx); } /* ============================================================ Fixed chrome: top bar ============================================================ */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: clamp(18px,2.2vw,30px) var(--mx); mix-blend-mode: normal; transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease); border-bottom: 1px solid transparent; } .topbar.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--hair); padding-block: clamp(12px,1.4vw,18px); } .brand-lock { display: flex; align-items: center; } /* real ORIGINALS logo as ; light variant swaps in on the dark direction */ .brand-logo { display: block; height: 21px; width: auto; } .footer-logo { display: block; height: clamp(38px, 7vw, 104px); width: auto; } .logo-on-dark { display: none; } html[data-direction="b"] .logo-on-light { display: none; } html[data-direction="b"] .logo-on-dark { display: block; } .nav { display: flex; align-items: center; gap: clamp(18px,2vw,40px); } .nav a { font-family: var(--en); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; color: var(--ink); position: relative; padding: 6px 0; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .35s var(--ease); } .nav a:hover::after { width: 100%; } .nav .cta { border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 20px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s; } .nav .cta::after { display: none; } .nav .cta:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .nav-toggle { display: none; } @media (max-width: 860px) { .nav .navlink { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(120px,16vh,200px) var(--mx) clamp(60px,10vh,110px); overflow: hidden; } .hero-kicker { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px,3vw,40px); } .hero-kicker::before { content: ""; width: 46px; height: 1.5px; background: var(--accent); display: inline-block; } .hero-display { font-family: var(--en); font-weight: 900; font-size: clamp(54px, 11.5vw, 210px); line-height: .92; letter-spacing: -.02em; color: var(--ink); margin: 0; } .hero-display .line { display: block; overflow: hidden; } .hero-display .word { display: inline-block; } .hero-display em { font-style: normal; color: var(--accent); } /* headline split into keys (letters). Accent letters = "Original." */ .hl-line { display: inline-block; } .hl-word { display: inline-block; white-space: nowrap; } .kc { display: inline-block; will-change: transform; } .kc.ac { color: var(--accent); } /* the whole "We Make You Original." ripples like piano keys, left→right, repeating every 15s. Staggered per-letter delay creates the wave; starts after the entrance settles. */ @media (prefers-reduced-motion: no-preference) { html.anim .hero.in .kc { animation: keyBounce 15s var(--ease) infinite; animation-delay: calc(1.8s + var(--k) * 0.052s); } } @keyframes keyBounce { 0%, 6%, 100% { transform: translateY(0); } 1.8% { transform: translateY(-0.22em); } 3.6% { transform: translateY(0.045em); } 4.8% { transform: translateY(-0.012em); } } .hero-sub { margin-top: clamp(28px,4vw,56px); max-width: 30em; font-family: var(--jp); font-weight: 400; font-size: clamp(15px,1.15vw,18px); line-height: 2.1; color: var(--ink-soft); letter-spacing: .04em; } .hero-sub span { display: block; } @media (min-width: 768px) { .hero-sub { max-width: none; } .hero-sub span { white-space: nowrap; } } .hero-foot { position: absolute; left: var(--mx); right: var(--mx); bottom: clamp(28px,4vh,48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .scrollcue { display: flex; align-items: center; gap: 12px; font-family: var(--en); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } .scrollcue .bar { position: relative; width: 60px; height: 1.5px; background: var(--hair-strong); overflow: hidden; } .scrollcue .bar::after { content:""; position:absolute; inset:0; width:40%; background: var(--accent); animation: cue 2.2s var(--ease) infinite; } @keyframes cue { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(260%)} } .hero-tag { font-family: var(--en); font-weight: 700; font-size: 11px; letter-spacing:.2em; text-transform: uppercase; color: var(--ink-soft); text-align: right; } /* kinetic marquee — only meaningful in direction B but harmless elsewhere */ .marquee { position: absolute; left:0; right:0; bottom: 16vh; pointer-events:none; opacity:0; } html[data-direction="b"] .marquee { opacity:.06; } .marquee .track { display: flex; white-space: nowrap; will-change: transform; align-items: center; } .marquee img { height: 13vw; width: auto; padding-right: 6vw; display: block; } /* inline logo — swaps ORIGINALS text for the real logotype inside running text */ .inline-logo { display: inline-block; vertical-align: baseline; line-height: 0; } .inline-logo img { height: .9em; width: auto; display: inline-block; vertical-align: -0.07em; } .inline-logo .logo-on-light { display: inline-block; } .inline-logo .logo-on-dark { display: none; } html[data-direction="b"] .inline-logo .logo-on-light { display: none; } html[data-direction="b"] .inline-logo .logo-on-dark { display: inline-block; } /* ============================================================ Section scaffolding ============================================================ */ .section { padding-block: var(--section-y); position: relative; } .sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(40px,5vw,72px); } .sec-index { font-family: var(--en); font-weight: 800; font-size: 13px; letter-spacing:.1em; color: var(--accent); opacity: 0; } html[data-direction="c"] .sec-index { opacity: 1; } .sec-label { font-family: var(--en); font-weight: 800; font-size: clamp(13px,1vw,15px); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); } .sec-label .jp { font-family: var(--jp); font-weight:500; font-size: 12px; letter-spacing:.12em; color: var(--ink-soft); margin-left: 14px; } /* ============================================================ CONCEPT ============================================================ */ .concept { position: relative; } .concept-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px,5vw,80px); } @media (min-width: 980px) { .concept-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } } .concept-lead { font-family: var(--en); font-weight: 900; font-size: clamp(30px,4.6vw,72px); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); } .concept-lead em { font-style: normal; color: var(--accent); } .concept-body { font-family: var(--jp); font-weight: 400; } .concept-body p { font-size: clamp(15px,1.18vw,18.5px); line-height: 2.15; letter-spacing:.05em; color: var(--ink); } .concept-body p + p { margin-top: 1.6em; } .concept-body .accentline { color: var(--ink); font-weight: 700; } .concept-body .promise { margin-top: 2.2em; padding-top: 1.6em; border-top: 1px solid var(--hair); font-weight: 700; font-size: clamp(17px,1.4vw,22px); letter-spacing:.06em; } /* ============================================================ PILLARS GAIN / GENESIS / GIVE ============================================================ */ .pillars { background: var(--bg-2); transition: background .6s var(--ease); } .pillars-list { display: grid; grid-template-columns: 1fr; } .pillar { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: baseline; padding-block: clamp(34px,4.4vw,64px); border-top: 1px solid var(--hair); position: relative; } .pillar:last-child { border-bottom: 1px solid var(--hair); } @media (min-width: 900px) { .pillar { grid-template-columns: 0.34fr 1fr 0.28fr; gap: clamp(24px,4vw,80px); align-items: center; } } .pillar-name { font-family: var(--en); font-weight: 900; font-size: clamp(40px,7vw,120px); line-height: .9; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; transition: transform .6s var(--ease); } /* hover: accent colour flows in one letter at a time — G → E → N → E → S → I → S */ .pillar-text { display: inline-block; } .pillar-text > span { display: inline-block; color: var(--ink); transition: color .34s var(--ease); transition-delay: calc(.12s + var(--i, 0) * .055s); } .pillar:hover .pillar-text > span { color: var(--accent); } /* logo "G" leads the sweep (no delay), then the letters follow. */ .pillar-name .pillar-g { display: inline-block; height: .76em; aspect-ratio: 169 / 184; vertical-align: baseline; position: relative; top: .02em; margin-right: .012em; background: var(--ink); -webkit-mask: url(assets/logo-g-dark.png) left center / contain no-repeat; mask: url(assets/logo-g-dark.png) left center / contain no-repeat; transition: background .34s var(--ease); } .pillar:hover .pillar-name .pillar-g { background: var(--accent); } .pillar-gloss { font-family: var(--jp); font-weight:400; font-size: clamp(14px,1.05vw,17px); line-height: 2; color: var(--ink-soft); letter-spacing:.05em; } .pillar-gloss b { color: var(--ink); font-weight:700; } .pillar-no { font-family: var(--en); font-weight: 800; font-size: 13px; letter-spacing:.12em; color: var(--accent); justify-self: end; } @media (max-width: 899px){ .pillar-no { display:none; } } /* ============================================================ SERVICE ============================================================ */ .svc-list { display: grid; grid-template-columns: 1fr; gap: clamp(60px,7vw,120px); } .svc { display: grid; grid-template-columns: 1fr; gap: clamp(22px,3vw,52px); } @media (min-width: 920px) { .svc { grid-template-columns: 0.42fr 0.58fr; align-items: start; } } .svc-left { position: relative; } .svc-num { font-family: var(--en); font-weight: 800; font-size: 13px; letter-spacing:.1em; color: var(--accent); } .svc-title { font-family: var(--en); font-weight: 900; font-size: clamp(40px,6vw,104px); line-height:.92; letter-spacing:-.02em; margin-top: 10px; } .svc-jp { font-family: var(--jp); font-weight: 500; font-size: 15px; letter-spacing:.14em; color: var(--ink-soft); margin-top: 14px; } .svc-items { display: grid; grid-template-columns: 1fr; gap: 0; } .svc-item { padding-block: clamp(22px,2.6vw,34px); border-top: 1px solid var(--hair); } /* last svc block keeps a closing line; intermediate blocks don't, so no empty bordered box appears in the large gap between services */ .svc-list > .svc:last-child .svc-item:last-child { border-bottom: 1px solid var(--hair); } .svc-item h4 { font-family: var(--jp); font-weight: 700; font-size: clamp(18px,1.5vw,24px); letter-spacing:.06em; display:flex; align-items:center; gap:14px; } .svc-item h4::before { content:""; width:7px; height:7px; background: var(--accent); border-radius:50%; flex:none; } .svc-item p { font-family: var(--jp); font-weight:400; font-size: clamp(14px,1.05vw,16.5px); line-height: 1.95; color: var(--ink-soft); margin-top: 10px; letter-spacing:.04em; padding-left: 21px; } .svc-cta { margin-top: clamp(40px,5vw,72px); } /* button */ .btn { display: inline-flex; align-items: center; gap: 16px; font-family: var(--en); font-weight: 800; font-size: 13px; letter-spacing:.2em; text-transform: uppercase; color: var(--ink); padding: 16px 30px; border: 1.5px solid var(--ink); border-radius: 999px; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), padding-right .35s var(--ease); } .btn .arr { transition: transform .35s var(--ease); } .btn:hover { background: var(--ink); color: var(--bg); } .btn:hover .arr { transform: translateX(6px); } .btn.accent { border-color: var(--accent); color: var(--accent); } .btn.accent:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ============================================================ WORKS / 実績 ============================================================ */ .works { background: var(--bg-2); transition: background .6s var(--ease); } .works-lead { font-family: var(--jp); font-weight: 500; font-size: clamp(16px,1.5vw,22px); line-height: 2; letter-spacing: .04em; color: var(--ink); margin-top: -8px; margin-bottom: clamp(34px,4vw,56px); } /* ---- filters ---- */ .works-filters { display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); margin-bottom: clamp(26px,3vw,40px); } .filter-group { display: flex; align-items: baseline; gap: clamp(14px,2vw,28px); flex-wrap: wrap; } .filter-label { font-family: var(--en); font-weight: 800; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); flex: none; width: clamp(0px, 12vw, 110px); } .filter-label .jp { display: block; font-family: var(--jp); font-weight: 500; font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); margin-top: 3px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--jp); font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); background: transparent; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .chip:hover { color: var(--ink); border-color: var(--ink); } .chip.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .works-note { font-family: var(--jp); font-size: 12.5px; color: var(--ink-soft); letter-spacing:.04em; margin-bottom: clamp(30px,3.5vw,48px); padding-left: 14px; border-left: 2px solid var(--accent); line-height:1.8; } /* ---- case-study card grid ---- */ .cworks-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px,3vw,44px); } @media (min-width: 680px){ .cworks-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px){ .cworks-grid { grid-template-columns: 1fr 1fr 1fr; } } .cwork.is-hidden { display: none; } .cwork-link { display: flex; flex-direction: column; height: 100%; } .cwork-thumb { display: block; position: relative; overflow: hidden; background: var(--paper-2); border: 1px solid var(--hair); aspect-ratio: 16/10; } .cwork-thumb image-slot { width: 100%; height: 100%; display: block; transition: transform .6s var(--ease); } .cwork:hover .cwork-thumb image-slot { transform: scale(1.04); } .cwork-body { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 20px; flex: 1; } .cwork-client { font-family: var(--jp); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--ink); white-space: nowrap; } .cwork-client small { font-weight: 500; font-size: 11px; color: var(--ink-soft); letter-spacing: 0; } .cwork-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cwork-tag { font-family: var(--jp); font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .cwork-tag.svc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .cwork-title { font-family: var(--jp); font-weight: 700; font-size: clamp(15px,1.15vw,17px); line-height: 1.7; letter-spacing: .02em; color: var(--ink); text-wrap: pretty; transition: color .3s var(--ease); } .cwork:hover .cwork-title { color: var(--accent); } .cwork-more { margin-top: auto; padding-top: 14px; font-family: var(--en); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; transition: color .3s var(--ease); } .cwork-more i { font-style: normal; transition: transform .3s var(--ease); } .cwork:hover .cwork-more { color: var(--accent); } .cwork:hover .cwork-more i { transform: translateX(5px); } .cworks-empty { display: none; font-family: var(--jp); font-size: 14px; color: var(--ink-soft); text-align: center; padding: clamp(40px,6vw,80px) 0; } /* show-more toggle */ .cwork.is-collapsed { display: none; } .cworks-toggle-wrap { display: flex; justify-content: center; margin-top: clamp(36px,4vw,56px); } .cworks-toggle-wrap.is-hidden { display: none; } .cworks-toggle { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; font-family: var(--en); font-weight: 800; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; padding: 15px 32px; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .cworks-toggle:hover { background: var(--ink); color: var(--bg); } .cworks-toggle-label::after { content: "（"; } .cworks-toggle-count { font-weight: 800; } .cworks-toggle-count::after { content: "件）"; font-family: var(--jp); } .cworks-toggle[aria-expanded="true"] .cworks-toggle-label { font-size: 0; } .cworks-toggle[aria-expanded="true"] .cworks-toggle-label::before { content: "閉じる"; font-family: var(--jp); font-size: 12px; font-weight: 700; letter-spacing: .12em; } .cworks-toggle[aria-expanded="true"] .cworks-toggle-label::after { content: ""; } .cworks-toggle[aria-expanded="true"] .cworks-toggle-count { display: none; } .cworks-toggle-icon { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease); margin-top: -3px; } .cworks-toggle[aria-expanded="true"] .cworks-toggle-icon { transform: rotate(-135deg); margin-top: 2px; } /* ============================================================ OUTLINE ============================================================ */ .outline-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px,5vw,72px); } @media (min-width: 980px){ .outline-grid { grid-template-columns: 1.05fr .95fr; } } .otable { width: 100%; border-collapse: collapse; } .otable tr { border-top: 1px solid var(--hair); } .otable tr:last-child { border-bottom: 1px solid var(--hair); } .otable th, .otable td { text-align: left; vertical-align: top; padding-block: clamp(18px,2vw,26px); } .otable th { width: 34%; font-family: var(--en); font-weight: 800; font-size: 12px; letter-spacing:.18em; text-transform: uppercase; color: var(--ink-soft); padding-right: 20px; } .otable td { font-family: var(--jp); font-weight: 500; font-size: clamp(15px,1.1vw,17px); letter-spacing:.04em; color: var(--ink); line-height:1.8; } .map { width: 100%; aspect-ratio: 4/3.2; border: 1px solid var(--hair); filter: grayscale(1) contrast(1.05); transition: filter .5s var(--ease); } .map:hover { filter: grayscale(0); } html[data-direction="b"] .map { filter: grayscale(1) invert(.92) contrast(.95); } html[data-direction="b"] .map:hover { filter: grayscale(.4) invert(.92); } .maplink { display:inline-flex; gap:10px; margin-top: 16px; font-family:var(--en); font-weight:800; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--accent); } /* ============================================================ CONTACT ============================================================ */ .contact { text-align: center; padding-block: clamp(110px,15vw,240px); } .contact-kicker { font-family:var(--en); font-weight:700; font-size:13px; letter-spacing:.34em; text-transform:uppercase; color: var(--accent); margin-bottom: 28px; } .contact-big { font-family: var(--en); font-weight: 900; font-size: clamp(40px,9vw,160px); line-height:.92; letter-spacing:-.02em; } .contact-mail { display:inline-block; margin-top: clamp(28px,4vw,52px); font-family:var(--en); font-weight:800; font-size: clamp(18px,2.4vw,40px); letter-spacing:.02em; color: var(--ink); position: relative; } .contact-mail::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); } .contact-mail:hover::after { transform: scaleX(1); } .contact-jp { font-family: var(--jp); font-size: 15px; color: var(--ink-soft); margin-top: 24px; letter-spacing:.05em; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--hair); padding-block: clamp(40px,5vw,64px); } .footer-row { display:flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 28px; } .footer .logo-mark { height: clamp(38px, 7vw, 104px); } .footer-meta { font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-soft); text-align:right; line-height:2; } .footer-links { display:flex; gap: 26px; margin-top: 36px; } .footer-links a { font-family:var(--en); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink); } .footer-links a:hover { color: var(--accent); } /* ============================================================ Scroll reveal — progressive enhancement. Content is VISIBLE by default; the hide-then-reveal only engages once motion.js adds .anim to . So if JS fails, is disabled, or reduced-motion is on, everything still shows. ============================================================ */ html.anim .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: opacity, transform; } html.anim .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; } /* ---- hero headline entrance patterns (Tweak: html[data-hero]) ---- */ .maskline { display: block; } .maskline > span { display: inline-block; } /* MASK — lines slide up behind a clip (default) */ html[data-hero="mask"] .maskline { overflow: hidden; } html.anim[data-hero="mask"] .maskline > span { transform: translateY(108%); transition: transform 1.05s var(--ease); } html.anim[data-hero="mask"] .hero.in .maskline > span { transform: none; } /* RISE — words fade in and lift */ html.anim[data-hero="rise"] .maskline > span { opacity: 0; transform: translateY(.34em); transition: opacity .9s var(--ease), transform .9s var(--ease); } html.anim[data-hero="rise"] .hero.in .maskline > span { opacity: 1; transform: none; } /* WIPE — left-to-right reveal, with a vertical bounce settle */ html.anim[data-hero="wipe"] .maskline > span { clip-path: inset(0 100% 0 0); transform: translateY(.55em); transition: clip-path 1.05s var(--ease); } html.anim[data-hero="wipe"] .hero.in .maskline > span { clip-path: inset(0 0 0 0); animation: heroBounce 1.15s var(--ease) both; } html.anim[data-hero="wipe"] .hero.in .maskline:nth-child(2) > span { animation-delay: .1s; } html.anim[data-hero="wipe"] .hero.in .maskline:nth-child(3) > span { animation-delay: .2s; } @keyframes heroBounce { 0% { transform: translateY(.55em); } 50% { transform: translateY(-.22em); } 72% { transform: translateY(.09em); } 88% { transform: translateY(-.03em); } 100% { transform: translateY(0); } } /* ZOOM — scale down into place behind a clip */ html[data-hero="zoom"] .maskline { overflow: hidden; } html.anim[data-hero="zoom"] .maskline > span { opacity: 0; transform: scale(1.12); transform-origin: left center; transition: opacity .8s var(--ease), transform 1.1s var(--ease); } html.anim[data-hero="zoom"] .hero.in .maskline > span { opacity: 1; transform: none; } /* per-line stagger (all patterns) */ .hero .maskline:nth-child(2) > span { transition-delay: .08s; } @media (prefers-reduced-motion: reduce) { .scrollcue .bar::after { animation: none; } }