/* PAZT — "wow" variant. Loaded after styles.css on . Adds an opening sequence, ambient depth, a memory marquee, the "You were 10 in Malaysia in 2001" reveal, and scroll-driven motion. Everything is CSS-only; every animation lives inside a prefers-reduced-motion: no-preference block, so reduced-motion users get the calm classic page with nothing hidden. */ /* ------------------------------------------------------------ Static wow */ .wow .hero { position: relative; overflow: clip; /* clips the glow without becoming a scroll container, so the mark can stick */ min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 56px; } .wow .hero-inner { position: relative; z-index: 1; } .wow .hero-mark { margin-bottom: 30px; position: sticky; top: 84px; z-index: 0; } .wow .hero-text { position: relative; z-index: 1; } .glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .glow i { position: absolute; border-radius: 50%; } .glow .g1 { width: 90vw; height: 90vw; max-width: 720px; max-height: 720px; top: -30vw; left: -30vw; background: radial-gradient(circle, rgba(245, 195, 156, 0.55), rgba(245, 195, 156, 0) 62%); } .glow .g2 { width: 80vw; height: 80vw; max-width: 640px; max-height: 640px; bottom: -20vw; right: -30vw; background: radial-gradient(circle, rgba(255, 138, 107, 0.32), rgba(255, 138, 107, 0) 62%); } .marquee { position: relative; z-index: 1; margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .marquee-track { display: flex; width: max-content; font-family: var(--serif); font-size: 1.02rem; color: var(--ink-faint); white-space: nowrap; } .marquee-track span { padding: 0 18px; } .marquee-track span::after { content: "·"; margin-left: 36px; color: var(--coral); } .wow header.site::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--peach), var(--coral) 60%, var(--navy)); transform-origin: left center; transform: scaleX(0); } .wow .label::before { content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.55em; vertical-align: -0.16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M52 52H148L52 148H148' fill='none' stroke='%23E96F50' stroke-width='36' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; } .wow .passport .label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M52 52H148L52 148H148' fill='none' stroke='%23FF8A6B' stroke-width='36' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* cards: depth, ink, and a back face */ .wow .cards { perspective: 1400px; } .wow .card { transform-style: preserve-3d; overflow: visible; background: transparent; border: 0; box-shadow: none; } .wow .card-inner { position: relative; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); } .wow .card-face { border-radius: var(--radius-card); background: var(--ivory); border: 1px solid var(--ivory-line); padding: 18px 16px 16px; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; overflow: hidden; } .wow .card-back { display: flex; position: absolute; inset: 0; transform: rotateY(180deg); background: var(--navy); color: var(--ivory); border-color: var(--navy); justify-content: center; } .wow .card-back .card-era { color: var(--coral); } .wow .card-back-line { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; margin: 8px 0 auto; } .wow .card-back .card-hint { color: rgba(253, 247, 237, 0.5); } .wow .card-back .stamp { border-color: var(--coral); color: var(--coral); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--coral); mix-blend-mode: normal; } .wow .card:has(input:checked) .card-inner { transform: rotateY(180deg); } .wow .card:has(input:checked) { border-color: transparent; } .wow .card:has(input:checked) .card-back .stamp { opacity: 1; transform: rotate(-8deg) scale(1); animation: stamp-in 0.32s var(--ease) 0.45s both; } .wow .card-front .stamp { display: none; } .wow .card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(circle at 28% 18%, rgba(255, 138, 107, 0.18), rgba(255, 138, 107, 0) 62%); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; } .wow .card:hover { transform: translateY(-5px) rotateX(1.5deg) rotateY(-1.5deg); box-shadow: none; } .wow .card:hover .card-face { box-shadow: 0 24px 50px -28px rgba(11, 27, 61, 0.45); } .wow .card:hover::after { opacity: 1; } .wow .stamp { border-width: 2px; padding: 7px 12px; box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--coral-deep); } /* passport in 3D */ .wow .book { overflow: visible; perspective: 1600px; box-shadow: none; } .wow .page { border-radius: 16px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); } .wow .page.right { transform-origin: left center; } /* ------------------------------------------------------------ Motion */ @media (prefers-reduced-motion: no-preference) { /* Opening sequence: the fold draws itself, the letters arrive, the words rise. */ .wow .wm-hero .z-ribbon { stroke-dasharray: 340; stroke-dashoffset: 340; animation: z-draw 1.5s var(--ease) 0.15s forwards, z-breathe 7s var(--ease) 2.6s infinite alternate; } @keyframes z-draw { to { stroke-dashoffset: 0; } } .wow .wm-hero .z-shadow { opacity: 0; animation: fade-in 0.9s var(--ease) 1.2s forwards, z-shadow-breathe 7s var(--ease) 2.6s infinite alternate; } .wow .wm-hero .z-now, .wow .wm-hero .z-then { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop 0.55s var(--ease) 0.1s forwards, z-breathe 7s var(--ease) 2.6s infinite alternate; } .wow .wm-hero .z-then { animation-delay: 1.45s, 2.6s; } .wow .wm-hero .z-traveller { opacity: 0; animation: fade-in 0.6s var(--ease) 2.2s forwards, z-breathe 7s var(--ease) 2.6s infinite alternate; } .wow .wm-letters { opacity: 0; animation: letter-in 0.9s var(--ease) 1.25s forwards; } .wow .wm-letters:first-child { transform: translateX(0.28em); } .wow .wm-letters:last-child { transform: translateX(-0.28em); animation-name: letter-in-r; } @keyframes letter-in { to { opacity: 1; transform: translateX(0); } } @keyframes letter-in-r { to { opacity: 1; transform: translateX(0); } } .wow .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: word-rise 0.8s var(--ease) forwards; } .wow .hero h1 .w:nth-child(1) { animation-delay: 1.7s; } .wow .hero h1 .w:nth-child(2) { animation-delay: 1.8s; } .wow .hero h1 .w:nth-child(3) { animation-delay: 1.9s; } .wow .hero h1 .w:nth-child(4) { animation-delay: 2s; } @keyframes word-rise { to { opacity: 1; transform: translateY(0); } } .wow .hero .lede, .wow .hero .cta-row, .wow .hero .fold, .wow .marquee { opacity: 0; animation: fade-up 0.9s var(--ease) forwards; } .wow .hero .lede { animation-delay: 2.25s; } .wow .hero .cta-row { animation-delay: 2.4s; } .wow .hero .fold { animation-delay: 2.55s; } .wow .marquee { animation-delay: 2.8s; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { to { opacity: 1; } } @keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ambient depth */ .glow .g1 { animation: drift-a 26s ease-in-out infinite alternate; } .glow .g2 { animation: drift-b 32s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate(12vw, 8vw); } } @keyframes drift-b { to { transform: translate(-10vw, -6vw); } } .marquee-track { animation: marquee 70s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } /* the reveal moment */ .wow .reveal-line { animation: fade-up 0.7s var(--ease) both; } .wow .rs-ring { animation: stamp-slam 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.35s both; } .wow .reveal-note { animation: fade-up 0.7s var(--ease) 0.95s both; } @keyframes stamp-slam { from { opacity: 0; transform: rotate(-8deg) scale(1.9); filter: blur(3px); } to { opacity: 1; transform: rotate(-8deg) scale(1); filter: blur(0); } } /* scroll-driven: progress line, hero exit, staggered arrivals, the book opening */ @supports (animation-timeline: scroll()) { .wow header.site::after { animation: progress linear both; animation-timeline: scroll(root); } @keyframes progress { to { transform: scaleX(1); } } .wow .hero-text { animation: hero-exit linear both; animation-timeline: scroll(root); animation-range: 0px 24vh; } @keyframes hero-exit { to { opacity: 0; transform: translateY(-24px) scale(0.97); } } /* The signature move: as you leave the hero, the fold opens into a straight timeline, present on the left, past on the right. */ .wow .wm-hero .seg { transform-box: fill-box; transform-origin: center; animation: linear both; animation-timeline: scroll(root); animation-range: 12vh 62vh; } .wow .wm-hero .seg-top { animation-name: unfold-top; } .wow .wm-hero .seg-mid { animation-name: unfold-mid; } .wow .wm-hero .seg-bot { animation-name: unfold-bot; } @keyframes unfold-top { to { transform: translate(-116px, 48px); } } @keyframes unfold-mid { to { transform: rotate(45deg); } } @keyframes unfold-bot { to { transform: translate(116px, -48px); } } .wow .wm-hero .z-shadow-wrap, .wow .wm-hero .z-trav-wrap { animation: fade-out linear both; animation-timeline: scroll(root); animation-range: 0px 25vh; } @keyframes fade-out { to { opacity: 0; } } .wow .wm-hero .wm-side { display: inline-block; animation: linear both; animation-timeline: scroll(root); animation-range: 0px 35vh; } .wow .wm-hero .wm-side-l { animation-name: side-out-l; } .wow .wm-hero .wm-side-r { animation-name: side-out-r; } @keyframes side-out-l { to { opacity: 0; transform: translateX(-0.5em); } } @keyframes side-out-r { to { opacity: 0; transform: translateX(0.5em); } } .wow .hero-mark { animation: mark-settle linear both; animation-timeline: scroll(root); animation-range: 0px 70vh; } @keyframes mark-settle { to { transform: scale(1.35); } } .wow .card { animation: card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } .wow .card:nth-child(2) { animation-range: entry 8% entry 50%; } .wow .card:nth-child(3) { animation-range: entry 16% entry 58%; } .wow .card:nth-child(4) { animation-range: entry 0% entry 42%; } .wow .card:nth-child(5) { animation-range: entry 8% entry 50%; } .wow .card:nth-child(6) { animation-range: entry 16% entry 58%; } @keyframes card-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } .wow .shelf::before { transform-origin: top; animation: draw-y linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } .wow .chapter { animation-name: chapter-in; } .wow .chapter:nth-child(2) { animation-range: entry 10% entry 55%; } .wow .chapter:nth-child(3) { animation-range: entry 20% entry 65%; } @keyframes chapter-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } .wow .ch-dots i.on { animation: dot-on linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; } @keyframes dot-on { from { background: transparent; border-color: rgba(11, 27, 61, 0.22); } to { background: var(--coral); border-color: var(--coral); } } .wow .page.right { animation: page-open linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; } @keyframes page-open { from { transform: rotateY(-75deg); opacity: 0.35; } to { transform: rotateY(0deg); opacity: 1; } } .wow .pstamp > span { animation: ink-sharpen linear both; animation-timeline: view(); animation-range: entry 20% entry 75%; } @keyframes ink-sharpen { from { filter: blur(3px); } to { filter: blur(0); } } .wow .lane-bar { transform-origin: left center; animation: grow-x linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } .wow .lane.them .lane-bar { animation-range: entry 10% entry 65%; } @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } .wow .lane-bar i { animation: dot-pop linear both; animation-timeline: view(); animation-range: entry 20% entry 60%; } .wow .lane-bar i:nth-child(2) { animation-range: entry 25% entry 65%; } .wow .lane-bar i:nth-child(3) { animation-range: entry 30% entry 70%; } .wow .lane-bar i:nth-child(4) { animation-range: entry 35% entry 75%; } .wow .lane-bar i:nth-child(5) { animation-range: entry 40% entry 80%; } .wow .lane-bar i:nth-child(6) { animation-range: entry 45% entry 85%; } .wow .lane-bar i:nth-child(7) { animation-range: entry 50% entry 90%; } .wow .lane-bar i:nth-child(8) { animation-range: entry 55% entry 95%; } .wow .lane-bar i:nth-child(9) { animation-range: entry 60% entry 100%; } @keyframes dot-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } .wow .overlap-band::before { animation-name: band-glow; animation-range: entry 30% entry 90%; } @keyframes band-glow { from { transform: scaleX(0); opacity: 0; box-shadow: 0 0 0 0 rgba(255, 138, 107, 0); } 70% { box-shadow: 0 0 44px 0 rgba(255, 138, 107, 0.35); } to { transform: scaleX(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 138, 107, 0); } } .wow .overlap-result { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } .wow .creed span { display: block; animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; } .wow .creed span:nth-child(2) { animation-range: entry 15% entry 65%; } .wow .creed span:nth-child(3) { animation-range: entry 30% entry 80%; } } } /* ------------------------------------------------------------ Desktop */ @media (min-width: 720px) { .wow .hero { padding: 32px 0 48px; } .wow .hero-mark { margin-bottom: 26px; } .wow .hero .cta-row { margin-top: 26px; } .wow .hero .fold { margin-top: 48px; } .marquee { margin-top: 40px; } .marquee-track { font-size: 1.12rem; } .reveal-stamp { margin-top: 28px; } }