/* =========================================================
   Atlas Kicks — shared elevation layer
   Motion, warmth, and detail. Made with love, for Atlas.
   ========================================================= */
/* Fonts (Caveat + Fraunces) are loaded via the theme's main `atlas-fonts`
   enqueue in functions.php — no @import here, which would add a render-blocking,
   chained request on every page. */

/* ---- real ATLAS wordmark logo ---- */
.brand-logo{height:23px;width:auto;display:block}
.foot-logo{height:30px;width:auto;display:block;margin-bottom:14px}
.ghost-logo{position:absolute;left:50%;bottom:-1.5vw;transform:translateX(-50%);width:74%;max-width:none;opacity:.05;pointer-events:none;z-index:1}

/* ---- global polish ---- */
html{scroll-behavior:auto}
::selection{background:var(--accent,var(--cat,#1b8cc4));color:#fff}
:focus-visible{outline:3px solid var(--accent,var(--cat,#1b8cc4));outline-offset:3px;border-radius:6px}
body{opacity:0;animation:pageIn .7s ease forwards}
@keyframes pageIn{to{opacity:1}}

/* ---- scroll reveal (only hidden when JS is confirmed on) ---- */
/* NOTE: no persistent `will-change` here — keeping it on every reveal element
   forces a standing GPU layer per element (18+ on a page), which causes scroll
   stutter/stick on some machines. The transition alone animates smoothly. */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,.8,.24,1),transform .85s cubic-bezier(.16,.8,.24,1)}
.js [data-reveal="left"]{transform:translateX(-34px)}
.js [data-reveal="right"]{transform:translateX(34px)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---- Ken Burns (slow cinematic zoom) ---- */
.kenburns{overflow:hidden}
.kenburns > img,.kb{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:center}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}

/* ---- animated aurora / drifting gradient ---- */
.aurora{position:relative;overflow:hidden}
.aurora::after{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 40% at 20% 30%,rgba(27,140,196,.36),transparent 60%),
             radial-gradient(38% 38% at 80% 20%,rgba(244,180,26,.26),transparent 60%),
             radial-gradient(45% 45% at 60% 85%,rgba(14,91,115,.34),transparent 60%);
  filter:blur(30px);animation:auroraDrift 18s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(-4%,-2%,0) rotate(0deg)}100%{transform:translate3d(4%,3%,0) rotate(8deg)}}

/* ---- twinkling stars (for cosmic hero) ---- */
.stars{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),
    radial-gradient(1px 1px at 40% 70%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),
    radial-gradient(1px 1px at 55% 45%,#fff,transparent),
    radial-gradient(1px 1px at 15% 80%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 90% 85%,#fff,transparent);
  background-repeat:no-repeat;opacity:.0;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.7}}

/* ---- gentle float ---- */
.float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- heartbeat ---- */
.beat{display:inline-block;animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.14)}}

/* ---- shimmering gradient text ---- */
.shimmer{background:linear-gradient(90deg,#0e5b73,#1b8cc4,#f4b41a,#d1333b,#0e5b73);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:250% 0}}

/* =========================================================
   Dear Atlas — the letter
   ========================================================= */
.dearatlas{background:radial-gradient(120% 90% at 50% 0%,#fbf5ea,#f4ecdd);padding:clamp(60px,9vw,120px) 24px;position:relative;overflow:hidden}
.dearatlas .kicker{text-align:center;font-family:'Caveat',cursive;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--accent,var(--cat,#1b8cc4));margin-bottom:26px}
.letter{max-width:740px;margin:0 auto;background:linear-gradient(180deg,#fffdf8,#fdf7ea);border:1px solid #ece1c8;border-radius:20px;
  padding:clamp(32px,5.5vw,68px);box-shadow:0 50px 100px rgba(90,66,24,.16),0 6px 20px rgba(90,66,24,.08);position:relative}
.letter::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;border-radius:6px;
  background:linear-gradient(180deg,#0e5b73,#1b8cc4,#f4b41a,#d1333b)}
.letter .to{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.6rem,6vw,4rem);color:var(--ink,#141414);line-height:.9;margin-bottom:22px}
.letter p{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.9;color:#3f3a30;margin-bottom:18px}
.letter p .em{color:var(--accent,var(--cat,#1b8cc4));font-style:italic}
.letter .sign{margin-top:26px}
.letter .sign .from{font-family:'Fraunces',serif;font-style:italic;color:#6f6857;font-size:1.02rem}
.letter .sign .name{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);color:var(--ink,#141414);line-height:1;margin-top:2px}
.letter .ps{margin-top:22px;padding-top:18px;border-top:1px dashed #e2d6bd;font-family:'Fraunces',serif;font-style:italic;color:#6f6857;font-size:1rem;line-height:1.7}
.letter .editnote{margin-top:22px;text-align:center;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.04em;color:#b7a888}

/* =========================================================
   Dedication / colophon — testament to the journey
   ========================================================= */
.dedication{background:var(--ink,#141414);color:#cfcbd8;text-align:center;padding:clamp(56px,8vw,90px) 24px;position:relative;overflow:hidden}
.dedication .in{position:relative;z-index:2;max-width:720px;margin:0 auto}
.dedication .heart{font-size:34px;line-height:1;margin-bottom:18px}
.dedication h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);color:#fff;line-height:1.35;margin-bottom:16px}
.dedication p{max-width:560px;margin:0 auto 8px;color:#a9a5b5;line-height:1.7;font-size:1.02rem}
.dedication .made{margin-top:22px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#7d7a8a}
.dedication .made b{color:#fff}
.dedication .sig{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);color:#fff;line-height:1;margin-top:22px}

/* soft footer credit line (site-wide) */
.credit{border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:20px;font-size:12.5px;color:#8a889a;text-align:center;position:relative;z-index:2}
.credit b{color:#cfcfe0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body{opacity:1;animation:none}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .kenburns > img,.kb,.aurora::after,.stars,.float,.beat,.shimmer{animation:none!important}
}