/* Wooly Moonbeam — the shared foundation.
   Loaded first by every page (index.html, the error pages, the cottage
   preview); each page then links its own stylesheet after this one and
   overrides whatever it needs to do differently.

   What lives here is only what more than one page actually uses: the palette,
   the night sky, the card, the entrance cascade, the pill button, the footer
   and the reduced-motion switch. Anything page-specific — the portrait, the
   framed error picture, the cottage scene — stays in that page's file. */

:root{
  --cream:#f7f1e6;
  --oatmeal:#e8dcc8;
  --moss:#7d9070;
  --mushroom:#8a7461;
  --berry:#9c5566;
  --lavender:#b9aecd;
  --moon:#dfe7f2;
  --night:#20263a;
  --night-2:#2e3550;
  --ink:#3a3226;
  --gold:#e0b871;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(1100px 700px at 50% -10%, #3a4166 0%, transparent 60%),
    radial-gradient(800px 600px at 85% 100%, #2b3350 0%, transparent 65%),
    linear-gradient(170deg, var(--night) 0%, #171c2c 100%);
  background-attachment:fixed;
  /* vh first as the fallback, then dvh — see the landscape note in CLAUDE.md */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  padding:clamp(20px,5vw,64px) 16px;
  padding-top:max(clamp(20px,5vw,64px), env(safe-area-inset-top));
  padding-bottom:max(clamp(28px,6vw,64px), env(safe-area-inset-bottom));
  position:relative;
  overflow-x:hidden;
}

/* ---- soft stitched "stars" ----
   Eight of them, placed here rather than on a style="" attribute in the
   markup, so the pages carry no CSS of their own. */
.stars{position:fixed;inset:0;pointer-events:none;opacity:.55}
.stars span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--moon);box-shadow:0 0 8px 2px rgba(223,231,242,.45);
  animation:twinkle 4.5s ease-in-out infinite;
}
.stars span:nth-child(1){top:12%;left:8%;animation-delay:0s}
.stars span:nth-child(2){top:22%;left:82%;animation-delay:.8s}
.stars span:nth-child(3){top:68%;left:14%;animation-delay:1.6s}
.stars span:nth-child(4){top:80%;left:74%;animation-delay:2.3s}
.stars span:nth-child(5){top:38%;left:92%;animation-delay:3.1s}
.stars span:nth-child(6){top:8%;left:56%;animation-delay:1.2s}
.stars span:nth-child(7){top:88%;left:40%;animation-delay:2.8s}
.stars span:nth-child(8){top:52%;left:4%;animation-delay:.4s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---- slow drifting yarn wisps ---- */
.wisp{
  position:fixed;bottom:-60px;pointer-events:none;
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(232,220,200,.18);
  animation:drift 22s linear infinite;
}
.wisp:nth-child(1){left:10%;animation-delay:0s}
.wisp:nth-child(2){left:28%;animation-delay:6s}
.wisp:nth-child(3){left:47%;animation-delay:12s}
.wisp:nth-child(4){left:68%;animation-delay:3s}
.wisp:nth-child(5){left:86%;animation-delay:16s}
@keyframes drift{
  0%{transform:translateY(0) rotate(0deg) scale(.6);opacity:0}
  12%{opacity:.7}
  85%{opacity:.5}
  100%{transform:translateY(-110vh) rotate(320deg) scale(1.4);opacity:0}
}

/* ---- the card ---- */
.card{
  position:relative;
  width:min(920px,100%);
  margin:auto;            /* centres without clipping when taller than viewport */
  text-align:center;
  background:rgba(247,241,230,.045);
  border:1px solid rgba(232,220,200,.16);
  border-radius:28px;
  padding:clamp(28px,4.5vw,56px);
  backdrop-filter:blur(6px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  overflow:hidden;
  animation:cardIn 1s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(24px) scale(.985)}
  to{opacity:1;transform:none}
}
/* stitched border — slow travelling stitches */
.card::after{
  content:"";position:absolute;inset:12px;border-radius:20px;
  border:2px dashed rgba(232,220,200,.22);pointer-events:none;
  animation:stitchBreathe 6s ease-in-out infinite;
}
@keyframes stitchBreathe{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.004)}
}
/* moonbeam sweeping across the card */
.card::before{
  content:"";position:absolute;top:-40%;left:-60%;
  width:45%;height:180%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(223,231,242,.10) 45%,rgba(223,231,242,.16) 50%,rgba(223,231,242,.10) 55%,transparent);
  transform:rotate(12deg);
  animation:moonsweep 11s ease-in-out infinite;
}
@keyframes moonsweep{
  0%,70%{left:-60%}
  100%{left:130%}
}

/* ---- staggered entrance for card contents ----
   .reveal plus a .d1–.d8 delay class. Reordering elements means renumbering
   the delays so they still cascade top to bottom. */
.reveal{animation:riseIn .9s cubic-bezier(.2,.8,.25,1) both}
@keyframes riseIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
.d4{animation-delay:.6s}.d5{animation-delay:.75s}.d6{animation-delay:.9s}
.d7{animation-delay:1.05s}.d8{animation-delay:1.2s}

/* ---- display type ----
   Sizes and margins are the page's business; the face is not. */
h1{
  font-family:'Gloock',Georgia,serif;
  font-weight:400;
  letter-spacing:.01em;
  color:#fdf8ef;
  text-shadow:0 2px 24px rgba(223,231,242,.25);
}

/* the gold pip between phrases in a kicker line */
.dot{
  display:inline-block;color:var(--gold);
  animation:dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- hairline divider, with a glint travelling along the thread ---- */
.divider{
  position:relative;
  width:120px;height:1px;margin:0 auto 28px;
  background:linear-gradient(90deg,transparent,rgba(224,184,113,.5),transparent);
  overflow:visible;
}
.divider::after{
  content:"";position:absolute;top:-2px;left:0;
  width:26px;height:5px;border-radius:50%;
  background:radial-gradient(circle,var(--gold),transparent 70%);
  animation:glint 5s ease-in-out infinite;
}
@keyframes glint{
  0%{left:-10%;opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{left:96%;opacity:0}
}

/* ---- the pill button ----
   The icon's hover move is page-specific: the Instagram glyph tilts, the
   home glyph slides. Both live with their page. */
.cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  margin-top:30px;padding:14px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--berry),#7d4459);
  color:#fdf8ef;text-decoration:none;
  font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(247,241,230,.25);
  box-shadow:0 10px 30px rgba(156,85,102,.35);
  transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
}
.cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 38px rgba(156,85,102,.5)}
.cta:active{transform:translateY(-1px) scale(.99)}
/* shine sweep on hover */
.cta::after{
  content:"";position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .7s ease;
}
.cta:hover::after{left:130%}
.cta svg{
  width:20px;height:20px;fill:currentColor;
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
}

/* ---- footer, and its swaying feather ---- */
footer{
  margin-top:36px;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,241,230,.35);
}
footer .feather{
  display:inline-block;
  animation:sway 4.5s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes sway{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(8deg) translateY(-3px)}
}

@media (max-width:600px){
  .card{padding:34px 20px;border-radius:22px}
  .card::after{inset:8px;border-radius:16px}
}

/* Every animation on the site has to be switchable off here. If you add one,
   it is already covered by the wildcard — but anything that *depends* on an
   animation or transition finishing needs its resting state restoring, the
   way .reveal does below. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}