:root{ --paper:#fafaf8; --paper-soft:#eeeeec; --ink:#111111; --ink-soft:#5c5c5c; --olive:#6b6b6b; --olive-deep:#2a2a2a; --olive-light:#bdbdbd; --line:rgba(17,17,17,0.14); --line-light:rgba(250,250,248,0.18); --ff-display:"Fraunces", serif; --ff-body:"Inter", sans-serif; --content:1100px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} html{background:var(--paper);} body{ background:transparent; /* podklad nese , kapky (z-index 0) jsou vidět za obsahem */ color:var(--ink); font-family:var(--ff-body); font-size:16px; line-height:1.5; overflow-x:hidden; /* text nejde označit ani kopírovat, žádný textový kurzor */ user-select:none; -webkit-user-select:none; cursor:default; } a,button{cursor:pointer;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;} ::selection{background:var(--olive);color:var(--paper);} section[id]{scroll-margin-top:64px;} :focus-visible{outline:2px solid var(--olive);outline-offset:3px;} .skip-link{ position:fixed;top:-60px;left:16px;z-index:300; background:var(--paper);color:var(--ink); padding:10px 18px;font-size:13px;border-radius:2px; transition:top .2s ease; } .skip-link:focus{top:12px;} /* grain overlay */ .grain{ position:fixed;inset:0; pointer-events:none; z-index:999; opacity:0.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* tekuté inkoustové hladiny — přilepené k hranám sekcí, scrollují s obsahem; goo filtr (blur + práh alfy) slévá kruhy do jedné kapaliny bez ostrých rohů */ .liquid-surface{ position:absolute;left:-40px; /* přesah přes kraje, ať goo nestahuje okraje dovnitř */ pointer-events:none; z-index:0; display:block; filter:url(#inkGoo) drop-shadow(0 10px 18px rgba(17,17,17,0.08)); } /* kapky padají ZA obsahem: canvas leží pod
, obsah je nad ním */ .liquid-drops{ position:fixed;inset:0; pointer-events:none; z-index:0; display:block; filter:url(#inkGoo); } main{position:relative;z-index:1;} /* buttons */ .btn{ display:inline-block; font-size:13px;letter-spacing:0.1em;text-transform:uppercase; padding:15px 30px;border-radius:40px; transition:background .3s,color .3s,border-color .3s,transform .3s; } .btn--solid{ background:var(--ink);color:var(--paper); border:1px solid var(--ink); } .btn--solid:hover{background:var(--olive-deep);border-color:var(--olive-deep);transform:translateY(-2px);} /* ============ header (černý, fixní) ============ */ .site-header{ position:fixed;top:0;left:0;right:0; display:flex;align-items:center;justify-content:space-between; gap:30px; padding:18px 5vw; z-index:200; background:var(--ink); color:var(--paper); border-bottom:1px solid var(--line-light); transition:transform .4s ease, padding .3s ease; } .site-header.is-scrolled{padding:12px 5vw;box-shadow:0 6px 24px rgba(0,0,0,0.25);} .logo{ display:flex;align-items:center; font-family:var(--ff-display); font-weight:600; font-size:22px; letter-spacing:0.02em; } .logo span{color:var(--olive-light);} .logo-mark{ height:40px;width:auto;display:block; transition:opacity .25s; } .logo:hover .logo-mark{opacity:0.82;} .main-nav{display:flex;gap:38px;margin-left:auto;} .main-nav a{ font-size:13px; letter-spacing:0.12em; text-transform:uppercase; position:relative; padding-bottom:4px; } .main-nav a::after{ content:"";position:absolute;left:0;bottom:0; width:0;height:1px;background:var(--paper); transition:width .3s ease; } .main-nav a:hover::after{width:100%;} .lang-switch{ display:flex;align-items:center;gap:2px; border:1px solid var(--line-light); border-radius:999px; padding:3px; } .lang-btn{ min-width:34px;height:28px; border-radius:999px; color:var(--olive-light); font-size:11px;letter-spacing:0.08em;font-weight:600; transition:background .25s,color .25s; } .lang-btn.is-active{ background:var(--paper); color:var(--ink); } .lang-switch--mobile{ margin-top:18px; border-color:var(--line-light); } .lang-switch--mobile .lang-btn{ min-width:48px;height:36px; font-size:13px; } .header-cta{ font-size:12px;letter-spacing:0.1em;text-transform:uppercase; border:1px solid var(--line-light);border-radius:30px; padding:10px 20px; transition:background .3s,color .3s,border-color .3s; } .header-cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);} .burger{display:none;flex-direction:column;gap:6px;width:26px;z-index:210;} .burger span{display:block;width:100%;height:1.5px;background:var(--paper);transition:transform .3s, opacity .3s;} .burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg);} .burger.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg);} .mobile-nav{ position:fixed;inset:0; background:var(--ink); z-index:190; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; gap:18px;padding:0 8vw; transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1); visibility:hidden; } .mobile-nav.is-open{transform:translateY(0);visibility:visible;} .mobile-nav a{ color:var(--paper); font-family:var(--ff-display); font-size:12vw; font-weight:500; } /* ============ úvod / o mně — tmavý blok, vycentrovaný ============ */ .intro{ background:var(--ink); color:var(--paper); padding:150px 5vw 80px; position:relative; /* kotva pro canvas tekuté hladiny */ } .intro-hero{ max-width:820px; margin:0 auto; text-align:center; padding-bottom:70px; } .intro-eyebrow{ font-size:13px;letter-spacing:0.18em;text-transform:uppercase; color:var(--olive-light);margin-bottom:24px; } .intro-name{ font-family:var(--ff-display);font-weight:600;line-height:1.02; font-size:clamp(46px,8vw,104px); } .intro-name em{font-style:normal;font-weight:500;color:var(--olive-light);} .intro-sub{ margin:24px auto 0;max-width:540px; font-size:18px;color:var(--olive-light); } .intro-grid{ display:grid;grid-template-columns:260px 1fr;gap:64px; align-items:center; border-top:1px solid var(--line-light); padding-top:60px; max-width:var(--content); margin:0 auto; } .intro-portrait{ width:240px;aspect-ratio:1; border-radius:50%; overflow:hidden; justify-self:center; } .intro-portrait img{ width:100%;height:100%;object-fit:cover; transition:transform .6s ease; } .intro-portrait:hover img{transform:scale(1.05);} .intro-heading{ font-family:var(--ff-display);font-weight:600; font-size:clamp(26px,3vw,36px); margin-bottom:22px; } .intro-bio p{ font-size:16px;color:var(--olive-light);max-width:620px;margin-bottom:18px; /* jediné místo na webu, kde jde text označit a zkopírovat */ user-select:text; -webkit-user-select:text; cursor:text; } .intro-bio p::selection{background:var(--olive-light);color:var(--ink);} .intro-bio p:first-of-type{color:var(--paper);} /* tlačítko "číst více" existuje jen na mobilu (viz @media 680px) */ .bio-toggle{display:none;cursor:pointer;} .intro-meta{ display:grid;grid-template-columns:1fr 1fr;gap:64px; border-top:1px solid var(--line-light); margin:44px auto 0;padding-top:44px; max-width:var(--content); } .meta-label{ display:block;font-size:12px;letter-spacing:0.14em;text-transform:uppercase; color:var(--olive-light);margin-bottom:20px; } .skills-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px;} .skills-row img{ height:32px;width:auto;object-fit:contain; transition:transform .3s; } .skills-row img:hover{transform:translateY(-3px);} .intro-contacts ul{list-style:none;} .intro-contacts li{ display:flex;gap:18px;align-items:baseline; padding:7px 0;font-size:15px; } .intro-contacts li span{ font-size:11px;letter-spacing:0.12em;text-transform:uppercase; color:var(--olive);min-width:74px; } .intro-contacts a{border-bottom:1px solid transparent;transition:border-color .25s,color .25s;} .intro-contacts a:hover{color:var(--olive-light);border-color:var(--olive-light);} /* ============ sekce obecně ============ */ .section-head{ display:flex;justify-content:center; padding:90px 5vw 44px; text-align:center; } .section-title{ font-family:var(--ff-display);font-weight:600; font-size:clamp(34px,5vw,58px); } /* ============ grafika — oddělené bloky ============ */ .work-inner{padding:0 5vw 80px;} .cat-block{ border-top:1px solid var(--line); padding:44px 0 52px; width:100%; } .cat-head{margin-bottom:24px;} .cat-title{ font-family:var(--ff-display);font-weight:600; font-size:clamp(21px,2.4vw,28px);margin-bottom:4px; } .cat-sub{font-size:13.5px;color:var(--ink-soft);} .strip-wrap{position:relative;} /* šipky stojí mimo galerii (v postranním okraji), nepřekrývají obrázky */ .strip-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:40px;height:40px;border-radius:50%; background:var(--paper);color:var(--ink); border:1px solid var(--line); font-size:17px; display:flex;align-items:center;justify-content:center; z-index:5; box-shadow:0 4px 16px rgba(17,17,17,0.12); transition:background .25s,color .25s,opacity .25s,visibility .25s; } .strip-arrow:hover{background:var(--ink);color:var(--paper);} .strip-arrow--prev{left:-52px;} .strip-arrow--next{right:-52px;} .strip-arrow.is-hidden{opacity:0;visibility:hidden;pointer-events:none;} /* na užších obrazovkách se šipky do okraje nevejdou — zůstává swipe a kolečko */ @media (max-width:1120px){ .strip-arrow{display:none;} } .gallery-strip{ display:flex;gap:6px;overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; } .gallery-strip::-webkit-scrollbar{display:none;} .gallery-item{ flex:none;scroll-snap-align:start; width:clamp(200px,22vw,300px);aspect-ratio:4/5; overflow:hidden;cursor:pointer;background:var(--paper-soft); position:relative; } .gallery-item img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .gallery-item:hover img{transform:scale(1.05);} /* mozaika pro vizuální identity — dlaždice v přirozeném poměru stran */ .gallery-mosaic{ display:flex;flex-wrap:wrap;gap:6px; } .gallery-mosaic::after{content:"";flex-grow:1000000;} .gallery-mosaic .gallery-item{ aspect-ratio:var(--ar,1.2); flex-grow:calc(var(--ar,1.2)*100); flex-basis:calc(var(--ar,1.2)*170px); min-width:130px; width:auto; overflow:hidden;cursor:pointer;background:var(--paper-soft); position:relative; } .gallery-mosaic .gallery-item img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .gallery-mosaic .gallery-item:hover img{transform:scale(1.04);} /* pevná kompozice (sloupce s řádky) — přepíše automatickou mozaiku */ .mosaic-cols{flex-wrap:nowrap;align-items:stretch;} .mosaic-cols::after{display:none;} .mosaic-col{display:flex;flex-direction:column;gap:6px;min-width:0;} .mosaic-row{display:flex;gap:6px;min-height:0;} /* fill řádek zabere přesně zbývající výšku sloupce — nikdy neroste podle obsahu (obsah je absolutně pozicovaný, takže výšku sloupce určují jen pevné řádky) */ .mosaic-row--fill{flex:1 1 0;min-height:0;overflow:hidden;position:relative;} .mosaic-cols .gallery-item{min-width:0;width:auto;flex-basis:0;} .mosaic-row--fill .gallery-item{ position:absolute;inset:0; height:auto;width:auto; aspect-ratio:auto !important; } .mosaic-row--fill .gallery-item img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* newslettery: ořez odshora + štítek klienta (v lightboxu jsou celé) */ .gallery-strip--tall .gallery-item img{object-position:top;} .gallery-item-label{ position:absolute;bottom:10px;left:10px; background:var(--paper);color:var(--ink); font-size:11px;letter-spacing:0.1em;text-transform:uppercase; padding:5px 10px;pointer-events:none; } /* ============ pixel art — herní karty pod sebou ============ */ .pixel-art{border-top:1px solid var(--line);padding-bottom:110px;} .game-grid{ padding:0 5vw; margin:0 auto; display:flex;flex-direction:column;gap:34px; } .game-card{ max-width:1400px;width:100%;margin:0 auto; background:var(--paper);color:var(--ink); border:1px solid var(--line); border-radius:6px;overflow:hidden; display:grid; grid-template-columns:minmax(0,440px) 1fr; align-items:stretch; transition:transform .35s ease, box-shadow .35s ease; } .game-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,17,17,0.1);} /* média v přirozeném poměru — nic se neořezává, portrait video je pillarboxed */ .game-media-wrap{ display:flex;justify-content:center;align-items:center; width:100%;height:100%; min-height:300px; position:relative; padding:16px; background:var(--paper-soft); } .game-media{ display:block; width:auto;height:auto; max-width:100%;max-height:440px; } .game-media-hint{ position:absolute;right:12px;bottom:12px; background:rgba(17,17,17,0.75);color:var(--paper); font-size:11px;letter-spacing:0.1em;text-transform:uppercase; padding:6px 12px;border-radius:20px; opacity:0;transition:opacity .3s; pointer-events:none; } .game-media-wrap:hover .game-media-hint{opacity:1;} .game-body{ padding:36px 40px; display:flex;flex-direction:column;justify-content:center;gap:0; } .game-top{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; flex-wrap:wrap; margin-bottom:10px; } .game-title{ font-family:var(--ff-display);font-weight:600; font-size:clamp(24px,2.6vw,32px); } .game-role{ font-size:11px;letter-spacing:0.12em;text-transform:uppercase; color:var(--olive-deep); } .game-desc{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.6;} .game-actions{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; margin-bottom:22px; } .play-badge img{height:44px;width:auto;transition:transform .25s;} .play-badge:hover img{transform:translateY(-2px);} .game-link{ font-size:13px;letter-spacing:0.04em;border-bottom:1px solid var(--line); padding-bottom:3px;transition:color .25s,border-color .25s; } .game-link:hover{color:var(--olive);border-color:var(--olive);} .game-gallery{display:flex;gap:8px;flex-wrap:wrap;} .game-thumb{ width:56px;height:56px;overflow:hidden;border-radius:3px;flex:none; opacity:0.7;transition:opacity .25s,transform .25s; } .game-thumb img{width:100%;height:100%;object-fit:cover;} .game-thumb:hover{opacity:1;transform:translateY(-3px);} /* pás pixelartových koček (Pretty Cat gif) — v těle karty, bez ořezu, klikací pro zvětšení */ .game-strip{ display:flex;justify-content:center; background:var(--paper-soft); border-radius:4px; padding:16px 20px; overflow:hidden; position:relative; cursor:pointer; width:100%; } .game-strip img{ width:auto;max-width:100%;height:auto; image-rendering:pixelated; transition:transform .3s ease; } .game-strip:hover img{transform:scale(1.03);} .game-strip + .game-gallery{margin-top:14px;} /* ============ instagram — bez ořezu, zarovnané do sloupců ============ */ .ig-showcase{ padding:0 5vw; margin-top:90px; border-top:1px solid var(--line); } .ig-head{ padding:56px 0 36px; max-width:620px;margin:0 auto;text-align:center; } .ig-title{ font-family:var(--ff-display);font-weight:600; font-size:clamp(24px,3vw,36px);margin-bottom:10px; } .ig-sub{font-size:15px;color:var(--ink-soft);} .ig-grid{ max-width:1200px;margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:20px; } .ig-item{ display:flex;justify-content:center; min-width:0; } .ig-item .instagram-media{ margin:0 !important; min-width:0 !important; width:100% !important; max-width:540px !important; } /* fallback, než se embed načte */ .ig-item blockquote{ width:100%; min-height:220px; border:1px solid var(--line);border-radius:3px; background:#fff; display:flex;align-items:center;justify-content:center; padding:24px; } .ig-item blockquote a{ font-size:13px;letter-spacing:0.06em;color:var(--ink-soft); border-bottom:1px solid var(--line);padding-bottom:3px; } .ig-cta{padding:40px 0 0;text-align:center;} /* ============ kontakt ============ */ .contact{ background:var(--ink);color:var(--paper); position:relative; /* kotva pro canvas tekuté hladiny */ } .contact-inner{ padding:100px 5vw 80px; max-width:var(--content);margin:0 auto; } .contact-title{ font-family:var(--ff-display);font-weight:600; font-size:clamp(52px,10vw,130px);line-height:0.96;margin-bottom:30px; } .dot-accent{color:var(--olive-light);} .contact-lead{ max-width:440px;font-size:16px;color:var(--olive-light); margin-bottom:40px; } .contact-email{ display:inline-block; font-family:var(--ff-display);font-size:clamp(24px,4vw,40px); border-bottom:1px solid var(--line-light); padding-bottom:10px;margin-bottom:60px; transition:color .3s, border-color .3s; overflow-wrap:anywhere; } .contact-email:hover{color:var(--olive-light);border-color:var(--olive-light);} .contact-meta{ display:flex;flex-wrap:wrap;gap:60px; border-top:1px solid var(--line-light); padding-top:34px;margin-bottom:60px; } .contact-meta-item span{ display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase; color:var(--olive-light);margin-bottom:8px; } .contact-meta-item a{font-size:18px;} .contact-meta-item a:hover{color:var(--olive-light);} .contact-games{border-top:1px solid var(--line-light);padding-top:34px;} .contact-games-label{ display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase; color:var(--olive-light);margin-bottom:20px; } .contact-games-row{display:flex;gap:34px;flex-wrap:wrap;} .contact-games-row a{display:flex;align-items:center;gap:12px;} .contact-games-row img{height:40px;width:auto;transition:transform .25s;} .contact-games-row a:hover img{transform:translateY(-2px);} .contact-games-row span{font-size:15px;} .contact-games-row a:hover span{color:var(--olive-light);} .footer{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:24px 5vw;border-top:1px solid var(--line-light); font-size:12px;color:var(--olive-light); } /* ============ lightbox ============ */ .lightbox{ position:fixed;inset:0;background:rgba(17,17,10,0.97); z-index:500;display:flex;flex-direction:column; opacity:0;pointer-events:none; transition:opacity .35s ease; } .lightbox.is-open{opacity:1;pointer-events:auto;} .lightbox-bar{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:24px 5vw;color:var(--paper); } .lightbox-info{display:flex;flex-direction:column;gap:4px;} .lightbox-title{font-family:var(--ff-display);font-size:20px;} .lightbox-count{font-size:12px;color:var(--olive-light);letter-spacing:0.08em;} .lightbox-links{display:flex;gap:16px;} .lightbox-links a{ font-size:12px;letter-spacing:0.08em;text-transform:uppercase; border:1px solid var(--line-light);padding:8px 14px;border-radius:30px;color:var(--paper); transition:background .25s,color .25s; } .lightbox-links a:hover{background:var(--paper);color:var(--ink);} .lightbox-close{color:var(--paper);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;} .lightbox-stage{ flex:1;display:flex;align-items:center;justify-content:center; padding:0 6vw;overflow:hidden; } .lightbox-stage img, .lightbox-stage video{ max-height:74vh;max-width:100%;object-fit:contain; box-shadow:0 30px 70px rgba(0,0,0,0.5); } /* atribut hidden musí přebít globální img{display:block} — jinak by se v lightboxu zobrazil obrázek i video zároveň */ .lightbox-stage img[hidden], .lightbox-stage video[hidden]{display:none !important;} /* pixel art v lightboxu: zvětšuj ostře a využij šířku */ .lightbox-stage img.is-pixel{ image-rendering:pixelated; width:min(1100px,90%); } /* velmi vysoké obrázky (newslettery): posuvné čtení v plné délce */ .lightbox.is-tall .lightbox-stage{ overflow-y:auto;align-items:flex-start;justify-content:center; padding:20px 6vw; } .lightbox.is-tall .lightbox-stage img{ max-height:none;width:min(560px,92%);height:auto; } .lightbox-nav{ position:absolute;top:50%;transform:translateY(-50%); color:var(--paper);font-size:28px; width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid var(--line-light); transition:background .25s,color .25s; z-index:10; } .lightbox-nav:hover{background:var(--paper);color:var(--ink);} .lightbox-prev{left:3vw;} .lightbox-next{right:3vw;} .lightbox-desc{ color:var(--olive-light);max-width:680px;margin:0 auto;padding:20px 5vw 36px; text-align:center;font-size:14px; } /* ============ reveal animace ============ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;} .reveal.is-visible{opacity:1;transform:translateY(0);} /* ============ responsive ============ */ @media (max-width:1000px){ .intro-grid{grid-template-columns:1fr;gap:40px;text-align:center;} .intro-bio p{margin-left:auto;margin-right:auto;} .intro-meta{grid-template-columns:1fr;gap:44px;text-align:center;} .skills-row{justify-content:center;} .intro-contacts li{justify-content:center;} .game-card{grid-template-columns:1fr;} .game-media-wrap{min-height:0;} .ig-grid{grid-template-columns:repeat(2,1fr);} .header-cta{display:none;} } @media (max-width:680px){ .liquid-surface, .liquid-drops{display:none !important;} .main-nav{display:none;} .burger{display:flex;} .intro{padding-top:120px;} .intro-portrait{width:190px;} .intro-sub{text-align:left;margin-left:0;margin-right:0;padding:0 8px;} /* dlouhy bio text: na mobilu zarovnany vlevo s odsazenim, zbytek za prvnim odstavcem skryty za tlacitkem Cist vice */ .intro-bio p{text-align:left;max-width:none;padding:0 8px;margin-left:0;margin-right:0;} #bioMore{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .25s ease; } #bioMore.is-expanded{ max-height:900px; opacity:1; } .bio-toggle{ display:inline-flex; font-size:13px;letter-spacing:0.08em;text-transform:uppercase; color:var(--paper); border-bottom:1px solid var(--line-light); padding-bottom:3px;margin:2px 6px 22px; background:none; transition:color .25s,border-color .25s; } .bio-toggle:hover{color:var(--olive-light);border-color:var(--olive-light);} .ig-grid{grid-template-columns:1fr;} .gallery-item{width:62vw;} .mosaic-cols{flex-direction:column;} .mosaic-row--fill .gallery-item{aspect-ratio:1.415 !important;height:auto;} .game-body{padding:24px 22px 26px;} .game-media{max-height:340px;} .contact-meta{gap:32px;} .lightbox-bar{flex-wrap:wrap;} .lightbox-nav{width:44px;height:44px;font-size:20px;} .lightbox-prev{left:2vw;} .lightbox-next{right:2vw;} .lightbox.is-tall .lightbox-stage{padding:12px 4vw 80px;} } /* ============ reduced motion ============ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }