/* =========================================================
   JASSY — theme v3 (dreamy fantasy edition)
   Loaded after theme-v2.css. Clean UI (nav, type, buttons,
   cards) surrounded by painted sky, clouds, paper and doodles.
   ========================================================= */
:root{
  --cream:#fffaf0;--cream-dark:#fff2d8;--paper:#fffdf8;
  --ink:#17213d;--ink-soft:#59647e;
  --blue:#2864e8;--blue-dark:#1749bd;--blue-light:#cfe1ff;--blue-soft:#dce9ff;
  --sky:#a9d6ff;--sky-soft:#e8f5ff;
  --yellow:#ffd04a;--yellow-soft:#fff0a8;
  --peach:#ffcda8;--pink:#ffdce8;--pink-dark:#f4a9c3;
  --mint:#d7f1df;--mint-dark:#70c99b;
  --lavender:#e6ddff;--lavender-dark:#9c8bea;
  --container:1250px;
  --radius-pill:999px;
  --shadow-floating:0 20px 50px rgba(23,33,61,.12);
  --shadow-blue:0 12px 26px rgba(40,100,232,.28);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --cream:#0f1629;--cream-dark:#141d35;--paper:#17213b;
  --ink:#eef2ff;--ink-soft:#a9b3cc;
  --blue:#7ba3ff;--blue-dark:#9dbbff;--blue-light:rgba(123,163,255,.2);--blue-soft:rgba(123,163,255,.16);
  --shadow-floating:0 20px 50px rgba(0,0,0,.4);
  --shadow-blue:0 12px 26px rgba(40,100,232,.4);
}

/* ---------- hero: painted fantasy scene ---------- */
.hero3{min-height:clamp(700px,96vh,920px);background:#a9d2fb}
.hero3__scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% top;z-index:0;pointer-events:none}
.hero3 .hero2__inner{min-height:clamp(600px,82vh,800px)}

/* the text sits on a torn sheet of paper with a dashed stitch line */
.hero-paper{position:relative;max-width:590px;padding:40px 46px 42px;margin-top:10px;
  background:rgba(255,253,246,.86);border-radius:25px 8px 30px 12px;box-shadow:var(--shadow-floating);transform:rotate(-.6deg)}
.hero-paper::before{content:"";position:absolute;inset:10px;border:2px dashed rgba(40,100,232,.22);border-radius:20px 6px 24px 10px;pointer-events:none}
.hero-paper::after{content:"";position:absolute;left:18px;right:26px;bottom:-9px;height:14px;
  background:radial-gradient(circle at 7px 0,rgba(255,253,246,.86) 6px,transparent 6.5px) 0 0/16px 14px repeat-x}
.hero3 .hero2__title{font-size:clamp(2.5rem,4.6vw,4rem)}
.hero3 .sparkle--hero{right:-30px;top:-44px}
.hero3 .doodle--hello{right:-70px}

/* character + friends */
.hero3__art{z-index:2;width:min(60vw,960px)}
.hero3__char{position:absolute;left:0;bottom:84px;width:82%;max-width:none;height:auto;
  filter:drop-shadow(0 22px 26px rgba(23,33,61,.16));animation:floatCharacter 6s ease-in-out infinite}
.hero3__mascot{position:absolute;left:10%;top:17%;width:118px;height:auto;max-width:none;z-index:4;animation:mascotFly 7s ease-in-out infinite}
@keyframes mascotFly{0%,100%{transform:translate(0,0) rotate(-4deg)}35%{transform:translate(14px,-16px) rotate(3deg)}70%{transform:translate(-8px,-6px) rotate(-2deg)}}
.hand-note{position:absolute;left:auto;right:3%;top:96px;text-shadow:0 0 8px rgba(255,255,255,.95),0 0 2px #fff;margin:0;z-index:4;font-family:var(--font-script);font-weight:700;font-size:1.7rem;line-height:1;color:var(--blue-dark);transform:rotate(-8deg)}
.hand-note svg{display:inline-block;width:18px;height:18px;vertical-align:-2px;color:#e2789c}
.hero3 .polaroid{top:300px;bottom:auto;right:3%;width:140px;transform:rotate(7deg)}
.hero3 .hero2__quote{top:500px;bottom:auto;right:3.5%;font-size:1.55rem;color:var(--blue-dark);transform:rotate(-7deg)}
.hero3 .doodle--quote{top:560px;bottom:auto;right:15%;width:64px;transform:rotate(-10deg)}
.hero3 .sketch-card{bottom:96px;right:2.5%;width:136px;transform:rotate(-5deg)}

/* sticky note with checkbox list */
.note--check{display:none;left:calc(50% - 150px);bottom:150px;top:auto;width:158px;padding:26px 18px 16px;background:#fff5c9;transform:rotate(-5deg);z-index:4}
.note--check ul{margin:0;padding:0;list-style:none}
.note--check li{display:flex;align-items:center;gap:7px;font-family:var(--font-script);font-weight:700;font-size:1.3rem;line-height:1.28;color:#3b4460}
.note--check li svg{flex:none;width:16px;height:16px;color:var(--blue)}
.note--check .note__heart{width:15px;height:15px;color:#e2789c}
.note__star{position:absolute;right:-12px;top:-14px;width:30px;height:30px;color:var(--yellow);filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}

.hero3__flowers{left:-20px;bottom:40px;width:300px;z-index:3}
.hero3 .leaves--hero{display:none}
.hero3__clouds{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(70px,9vw,140px);z-index:5;pointer-events:none}
.hero3__clouds path{fill:var(--cream);transition:fill .35s ease}

/* loops pause off-screen (JS) and for reduced motion */
.hero3.is-offscreen *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.hero3 *{animation:none!important}}

/* ---------- services ---------- */
.svc{position:relative;padding:clamp(34px,5vw,70px) 0 clamp(20px,3vw,40px);overflow:hidden}
.svc__inner{position:relative;z-index:2;width:min(var(--container),92%);margin:0 auto}
.svc__head{position:relative;display:grid;grid-template-columns:auto minmax(0,360px);column-gap:clamp(30px,5vw,70px);align-items:end;padding-right:230px}
.svc__head .section-label{grid-column:1;justify-self:start}
.svc__head .section-title{grid-column:1;margin-bottom:0}
.hl-marker{color:var(--blue);background:linear-gradient(transparent 60%,var(--yellow-soft) 60% 92%,transparent 92%);padding:0 .08em}
html[data-theme="dark"] .hl-marker{background:linear-gradient(transparent 62%,rgba(255,208,74,.28) 62% 92%,transparent 92%)}
.svc__desc{grid-column:2;grid-row:2;margin:0 0 6px;color:var(--ink-soft);font-size:1rem}
.doodle--svc{left:clamp(380px,33vw,470px);top:24px;width:70px;transform:rotate(-8deg);stroke:var(--yellow);stroke-width:2.6}
.svc__note{position:absolute;right:0;top:18px;margin:0;font-family:var(--font-script);font-weight:700;font-size:1.75rem;line-height:1.02;color:var(--blue-dark);transform:rotate(-6deg);text-align:right}
.svc__note svg{display:inline-block;width:18px;height:18px;vertical-align:-2px;color:#e2789c}
.sparkle--svc{right:210px;top:6px}

.svc__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:40px 0 0;padding:0;list-style:none}
.service-card{--tint:#f4a9c3;--c1:#f7e2ff;--c2:#fff8ff;position:relative;padding:26px 22px 76px;border-radius:28px;
  background:linear-gradient(160deg,var(--c1),var(--c2));border:1px solid rgba(23,33,61,.06);box-shadow:var(--shadow-floating);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.service-card:nth-child(even){transform:translateY(14px)}
.service-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 60px rgba(23,33,61,.16)}
.service-card--pink{--tint:#e06aa0;--c1:#f7e2ff;--c2:#fff8ff}
.service-card--mint{--tint:#3fa874;--c1:#dff5e7;--c2:#f9fff8}
.service-card--blue{--tint:#2864e8;--c1:#dcecff;--c2:#f7fbff}
.service-card--peach{--tint:#e8893f;--c1:#fff0d9;--c2:#fffaf2}
.service-card--lavender{--tint:#7b69d8;--c1:#e9e1ff;--c2:#faf8ff}
.service-card__icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;border-radius:20px 20px 20px 8px;background:#fff;color:var(--tint);box-shadow:0 8px 18px rgba(23,33,61,.08)}
.service-card__icon svg{width:28px;height:28px}
.service-card h3{margin:0 0 8px;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.service-card p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
.service-card__go{position:absolute;left:22px;bottom:20px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--tint);box-shadow:0 6px 14px rgba(23,33,61,.12);transition:background .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out)}
.service-card__go svg{width:18px;height:18px}
.service-card__go:hover,.service-card__go:focus-visible{background:var(--tint);color:#fff;transform:translateX(4px)}
html[data-theme="dark"] .service-card{background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 20%,var(--paper)),var(--paper));border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .service-card__icon,html[data-theme="dark"] .service-card__go{background:rgba(255,255,255,.08)}
.wc--v1{left:-200px;top:-60px;width:480px;opacity:.45}
.wc--v2{right:-220px;bottom:-120px;width:480px;opacity:.4}

/* ---------- selected work: filter chips ---------- */
.selected__main{min-width:0}
.chip-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.chip-filter{padding:9px 18px;border:1px solid rgba(23,33,61,.12);border-radius:var(--radius-pill);background:var(--paper);color:var(--ink-soft);
  font:600 .86rem/1 var(--font-body);cursor:pointer;transition:background .3s var(--ease-out),color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.chip-filter:hover{color:var(--blue);transform:translateY(-2px)}
.chip-filter.is-active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
html[data-theme="dark"] .chip-filter{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .chip-filter.is-active{background:#2864e8;border-color:#2864e8}
.project-card[hidden]{display:none}
.project-card--big{transform:rotate(-.5deg)}
.project-card--big:hover{transform:rotate(-.5deg) translateY(-8px)}
.selected__grid.is-filtered{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-template-rows:auto}
.selected__grid.is-filtered .project-card--big{grid-row:auto;grid-column:auto}
.selected__grid.is-filtered .project-card--big .project-image{aspect-ratio:16/10;flex:none;min-height:0}
.selected__grid.is-filtered .project-card--big .project-body h3{font-size:1.05rem;color:var(--blue)}

/* ---------- nav brand star ---------- */
.navpill__brand{display:inline-flex;align-items:center;gap:8px}
.navpill__brand svg{width:18px;height:18px;color:var(--yellow)}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .hero3{background:#1a2544}
html[data-theme="dark"] .hero3::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,16,38,.72),rgba(12,20,44,.52) 60%,rgba(15,22,41,.8))}
html[data-theme="dark"] .hero3__char{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}
html[data-theme="dark"] .hero-paper{background:rgba(23,33,59,.88)}
html[data-theme="dark"] .hero-paper::before{border-color:rgba(123,163,255,.3)}
html[data-theme="dark"] .hero-paper::after{background-image:radial-gradient(circle at 7px 0,rgba(23,33,59,.88) 6px,transparent 6.5px)}
html[data-theme="dark"] .hand-note,html[data-theme="dark"] .hero3 .hero2__quote{color:#cfe0ff}
html[data-theme="dark"] .hero3__flowers,html[data-theme="dark"] .hero3 .leaves--hero{opacity:.7}

/* ---------- responsive ---------- */
@media (min-width:1440px){.note--check{display:block}}
@media (max-width:1280px){
  .svc__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-card:nth-child(even){transform:none}
  .svc__head{padding-right:0;grid-template-columns:auto minmax(0,340px)}
  .svc__note,.sparkle--svc{display:none}
  .hero3 .polaroid{width:124px}
  .hero3 .hero2__quote,.hero3 .doodle--quote{display:none}
  .hero3 .sketch-card{width:124px}
}
@media (max-width:1100px){
  .hero3 .hero2__quote,.hero3 .doodle--quote{display:none}
}
@media (max-width:980px){
  .hero3{min-height:0}
  .hero3 .hero2__inner{min-height:0}
  .hero-paper{margin:24px auto 0;padding:32px 26px 34px;transform:none}
  .hero3__art{width:100%;height:clamp(340px,74vw,580px);margin-top:10px}
  .hero3__char{left:2%;width:96%;bottom:40px}
  .hero3__mascot{width:86px;left:6%;top:6%}
  .hand-note{left:auto;right:6%;top:6%;font-size:1.4rem}
  .hero3 .polaroid{bottom:auto;top:32%;right:2%;width:100px}
  .hero3 .sketch-card{display:none}
  .hero3__flowers{width:200px;bottom:30px;left:-30px}
  .svc__head{grid-template-columns:1fr;text-align:center;justify-items:center}
  .svc__head .section-label{justify-self:center}
  .svc__desc{grid-column:1;grid-row:auto;margin-top:14px;max-width:440px}
  .doodle--svc{display:none}
  .chip-filters{justify-content:center}
}
@media (max-width:700px){
  .hero-paper{padding:28px 20px 30px;border-radius:20px 8px 22px 10px}
  .hero3 .polaroid,.hero3 .leaves--hero{display:none}
  .hero3__flowers{width:150px}
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .service-card{padding:20px 16px 66px;border-radius:22px}
  .service-card__go{left:16px;bottom:16px}
  .wc--v1,.wc--v2{display:none}
}
@media (max-width:460px){
  .svc__grid{grid-template-columns:1fr}
  .service-card{padding:20px 20px 20px 92px;min-height:0}
  .service-card__icon{position:absolute;left:18px;top:20px;margin:0}
  .service-card__go{left:auto;right:16px;bottom:auto;top:50%;margin-top:-20px}
  .service-card p{padding-right:44px}
}
/* theme-v2's "polish" column rule came after its own breakpoint and kept two columns on small screens */
@media (max-width:1100px){.selected__inner{grid-template-columns:1fr}}

/* =========================================================
   v24 — painted backgrounds + ambient motion
   (transform/opacity only; loops pause off-screen + reduced motion)
   ========================================================= */
.hero3__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero3__bg .hero3__scene{inset:-3%;width:106%;height:106%;object-position:74% 20%;
  animation:sceneDrift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes sceneDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-1%,0)}}

.hero3__cloud{position:absolute;left:0;width:clamp(220px,26vw,420px);height:auto;max-width:none;opacity:.7;
  animation:cloudDrift 90s linear infinite;will-change:transform}
.hero3__cloud--1{top:36%;animation-delay:-25s}
.hero3__cloud--2{top:62%;width:clamp(280px,32vw,520px);opacity:.8;animation-duration:110s;animation-delay:-70s}
.hero3__cloud--3{top:10%;width:clamp(160px,18vw,300px);opacity:.55;animation-duration:75s;animation-delay:-40s}
@keyframes cloudDrift{from{transform:translate3d(-45vw,0,0)}to{transform:translate3d(110vw,0,0)}}

.twinkle{position:absolute;width:16px;height:16px;color:#ffd04a;animation:twinkle 3.8s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,240,180,.9))}
.twinkle--1{left:22%;top:16%}
.twinkle--2{left:47%;top:30%;width:12px;height:12px;animation-delay:-1.2s}
.twinkle--3{left:58%;top:12%;animation-delay:-2.1s}
.twinkle--4{left:86%;top:52%;width:20px;height:20px;animation-delay:-.6s}
.twinkle--5{left:38%;top:74%;width:12px;height:12px;animation-delay:-2.8s}
.twinkle--6{left:70%;top:66%;animation-delay:-1.7s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(25deg)}}

.petal{position:absolute;top:-40px;width:18px;height:18px;opacity:0;animation:petalFall 17s linear infinite;will-change:transform}
.petal--1{left:30%}
.petal--2{left:52%;width:22px;height:22px;animation-duration:21s;animation-delay:-6s}
.petal--3{left:74%;animation-duration:15s;animation-delay:-11s}
.petal--4{left:90%;width:20px;height:20px;animation-duration:19s;animation-delay:-3s}
.petal--5{left:62%;width:14px;height:14px;animation-duration:23s;animation-delay:-15s}
.petal--6{left:18%;animation-duration:20s;animation-delay:-9s}
@keyframes petalFall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  8%{opacity:.95}
  50%{transform:translate3d(-9vw,48vh,0) rotate(220deg)}
  90%{opacity:.9}
  100%{transform:translate3d(-3vw,100vh,0) rotate(460deg);opacity:0}}

/* keepsakes sway gently (individual rotate/translate stack on top of their tilt) */
.hero3 .polaroid{animation:sway 7s ease-in-out infinite}
.hero3 .sketch-card{animation:sway 8.5s ease-in-out -3s infinite}
.note--check{animation:sway 9s ease-in-out -5s infinite}
.hand-note,.hero3 .hero2__quote{animation:bob 6s ease-in-out infinite}
.hero3 .hero2__quote{animation-delay:-2s}
@keyframes sway{0%,100%{rotate:0deg;translate:0 0}50%{rotate:-2.5deg;translate:0 -6px}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* services sit on the painted watercolor frame */
.svc{background:var(--cream)}
.svc__frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 80%,transparent)}
.site-logo{text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9)}
.site-logo__star{filter:drop-shadow(0 0 5px rgba(255,255,255,.95))}
html[data-theme="dark"] .site-logo{text-shadow:0 0 10px rgba(10,16,38,.9)}
html[data-theme="dark"] .site-logo__star{filter:none}
html[data-theme="dark"] .svc__frame{opacity:.13}
.svc__head .section-title,.svc__desc{text-shadow:0 1px 0 rgba(255,250,240,.6)}
html[data-theme="dark"] .svc__head .section-title,html[data-theme="dark"] .svc__desc{text-shadow:none}

/* one-shot staggered reveal (JS adds .reveal-ready only when motion is allowed) */
.reveal-ready [data-reveal]{opacity:0;translate:0 28px;
  transition:opacity .7s var(--ease-out) var(--d,0ms),translate .7s var(--ease-out) var(--d,0ms),transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.reveal-ready [data-reveal].is-in{opacity:1;translate:0 0}

@media (max-width:700px){
  .hero3__bg .hero3__scene{object-position:60% 30%}
  .hero3__cloud--3,.twinkle--2,.twinkle--5,.petal--4,.petal--5,.petal--6{display:none}
  .svc__frame{height:auto;bottom:auto;object-fit:contain;object-position:left top;opacity:.6;
    -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .hero3__bg *,.hero3 .polaroid,.hero3 .sketch-card,.note--check,.hand-note,.hero3 .hero2__quote{animation:none!important}
  .petal{display:none}
}

/* =========================================================
   v25 — torn-paper tagline, fixed header, landing page
   ========================================================= */
/* header floats over the hero (it was 99px tall but the hero only tucked 86px under it -> cream strip) */
.site-header.nav{position:fixed;top:0;left:0;right:0}
.hero2{margin-top:0;padding-top:96px}
html{scroll-padding-top:90px}

/* tagline sits on the painted torn paper; 9-slice keeps the torn rim crisp at any size */
.hero-paper{max-width:660px;background:none;box-shadow:none;border-radius:0;transform:rotate(-1deg);isolation:isolate;
  padding:clamp(40px,4.2vw,60px) clamp(46px,5vw,72px) clamp(92px,8.6vw,124px) clamp(46px,5vw,70px)}
.hero-paper::before{inset:0;border-radius:0;border-style:solid;border-color:transparent;
  border-width:clamp(22px,2.7vw,38px) clamp(20px,2.4vw,33px) clamp(60px,7.2vw,110px) clamp(20px,2.4vw,33px);
  border-image:url(../img/paper-tagline.webp) 56 48 160 48 fill stretch;
  filter:drop-shadow(0 18px 22px rgba(23,33,61,.2));z-index:-1}
.hero-paper::after{display:none}
.hero3 .sparkle--hero{right:-16px;top:-40px}
/* the paper stays cream at night, so keep daytime ink on it */
html[data-theme="dark"] .hero-paper{background:none;--ink:#17213d;--ink-soft:#4d5873;--blue:#2864e8;--blue-dark:#1749bd;color:var(--ink)}
html[data-theme="dark"] .hero-paper::before{border-color:transparent;filter:brightness(.9) drop-shadow(0 18px 26px rgba(0,0,0,.5))}
html[data-theme="dark"] .hero-paper .btn-secondary{background:rgba(255,255,255,.55);border-color:rgba(40,55,90,.25);color:#17213d}
html[data-theme="dark"] .hand-note{text-shadow:0 0 8px rgba(10,16,38,.9)}

/* standalone landing page (index.html) */
.home-landing .hero3{min-height:100vh;min-height:100svh}
.home-landing .hero3 .hero2__inner{min-height:calc(100svh - 110px)}
.home-landing .hero3__clouds{display:none}
.btn-wonder{position:relative;padding:17px 30px;font-size:1.02rem;letter-spacing:.01em}
.btn-wonder .btn-wonder__spark{width:18px;height:18px;color:var(--yellow)}
.btn-wonder:hover .btn-wonder__spark{transform:rotate(90deg) scale(1.15)}
.btn-wonder__spark{transition:transform .5s var(--ease-out)}

@media (max-width:980px){
  .hero-paper{transform:none;padding:44px 34px 96px}
  .home-landing .hero3 .hero2__inner{min-height:0}
}
@media (max-width:700px){
  .hero2{padding-top:84px}
  .hero-paper{padding:38px 28px 84px;border-radius:0}
}
/* sticky note pinned to the paper's left edge (reference layout), clear of the buttons */
.note--check{left:max(10px,calc(50% - 770px));top:200px;bottom:auto;z-index:6}

/* =========================================================
   v26 — load entrance: fade-ins + soft pop-ins
   Entrances use opacity + the individual scale/translate properties,
   so they stack on top of each element's transform-based idle loop.
   ========================================================= */
:root{--ease-spring:cubic-bezier(.34,1.45,.64,1)}
@keyframes inFade{from{opacity:0}to{opacity:1}}
@keyframes inRise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes inDrop{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@keyframes inPaper{from{opacity:0;translate:0 28px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes inPop{0%{opacity:0;scale:.55}70%{opacity:1}100%{opacity:1;scale:1}}
@keyframes inPopChar{0%{opacity:0;scale:.84;translate:0 36px}70%{opacity:1}100%{opacity:1;scale:1;translate:0 0}}
@keyframes inDraw{from{scale:0 1}to{scale:1 1}}

.site-header.nav{animation:inDrop .7s var(--ease-out) .1s both}
.hero3__bg{animation:inFade 1.3s ease-out both}   /* scene, clouds, twinkles and petals fade in together */
.hero3 .hero-paper{animation:inPaper .9s var(--ease-out) .25s both}
.hero3 .hello{animation:inRise .7s var(--ease-out) .45s both}
.hero3 .hero2__line{animation:inRise .7s var(--ease-out) .55s both}
.hero3 .hero2__accent{animation:inRise .7s var(--ease-out) .67s both}
.hero3 .brush{transform-origin:left center;animation:inDraw .7s var(--ease-out) .95s both}
.hero3 .hero2__desc{animation:inRise .7s var(--ease-out) .8s both}
.hero3 .hero2__actions{animation:inRise .7s var(--ease-out) .92s both}
.hero3 .sparkle--hero{animation:inPop .6s var(--ease-spring) 1.3s both}

.hero3__char{animation:inPopChar 1.05s var(--ease-spring) .5s both,floatCharacter 6s ease-in-out 1.55s infinite}
.hero3__mascot{animation:inPop .75s var(--ease-spring) 1.1s both,mascotFly 7s ease-in-out 1.85s infinite}
.note--check{animation:inPop .7s var(--ease-spring) 1.2s both,sway 9s ease-in-out 1.9s infinite}
.hero3 .polaroid{animation:inPop .7s var(--ease-spring) 1.3s both,sway 7s ease-in-out 2s infinite}
.hand-note{animation:inPop .7s var(--ease-spring) 1.4s both,bob 6s ease-in-out 2.1s infinite}
.hero3 .hero2__quote{animation:inPop .7s var(--ease-spring) 1.5s both,bob 6s ease-in-out 2.2s infinite}
.hero3 .doodle--quote{animation:inFade .6s ease-out 1.65s both}
.hero3 .sketch-card{animation:inPop .7s var(--ease-spring) 1.6s both,sway 8.5s ease-in-out 2.3s infinite}
.note__star{animation:inPop .6s var(--ease-spring) 1.6s both}

/* service-card icons pop inside their cards when the card reveals */
.reveal-ready [data-reveal] .service-card__icon{opacity:0;scale:.5;
  transition:opacity .5s ease-out calc(var(--d,0ms) + 250ms),scale .65s var(--ease-spring) calc(var(--d,0ms) + 250ms)}
.reveal-ready [data-reveal].is-in .service-card__icon{opacity:1;scale:1}

@media (prefers-reduced-motion:reduce){
  .site-header.nav,.hero3 *{animation:none!important}
  .reveal-ready [data-reveal] .service-card__icon{opacity:1;scale:1;transition:none}
}

/* v27 — filter chips: fade the old set out, stagger the new set in */
.selected__grid{transition:opacity .16s ease}
.selected__grid.is-swapping{opacity:0}
@keyframes chipIn{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.project-card.chip-in{animation:chipIn .55s var(--ease-out) calc(var(--ci,0) * 80ms) both}
@media (prefers-reduced-motion:reduce){
  .selected__grid{transition:none}
  .project-card.chip-in{animation:none}
}