/* ==========================================================================
   samisee.design, LOOKS: what changes between night, sunset and day beyond
   the Figma colour tokens (tokens.css stays a pure Figma export).

   1. look tokens      shadows, text halos, signature ink, the opal gradient
   2. sunset           Phoenix dusk: sky, sun, ridges, saguaros
   3. day              pearl paper: bloom, pastel holo foil, lilac grid,
                       plum ink, opal rims on the glass, lilac-tinted shadows

   Each look has its own light: night, orbs blooming from the signature
   (wallpaper.css); sunset, a low sun over a Phoenix dusk; day, pastel holo
   foil that shifts as you move. On light, colour is pastel and smooth,
   never a blurred blob (a blurred colour on pearl reads as a smudge).
   ========================================================================== */

/* ---- 1. look tokens ---- */
body {
  --shade: #000;                          /* the colour shadows are made of */
  --halo: rgb(0 0 0 / .55);               /* behind text that sits on the wallpaper */
  --sig-ink: var(--os-ink);
  --sig-glow: color-mix(in oklch, var(--os-ink) 12%, transparent);
  --opal: linear-gradient(115deg in oklch,
    var(--opal-silver),
    color-mix(in oklch, var(--os-accent-2) 72%, var(--opal-silver)) 18%,
    color-mix(in oklch, var(--os-accent) 72%, var(--opal-silver)) 36%,
    color-mix(in oklch, var(--os-accent-3) 66%, var(--opal-silver)) 54%,
    var(--opal-warm) 70%,
    color-mix(in oklch, var(--os-accent-2) 72%, var(--opal-silver)) 86%,
    var(--opal-silver));
}
body[data-look="sunset"] {
  --shade: oklch(0.13 0.04 300);          /* deep plum, never black, at dusk */
  --halo: oklch(0.16 0.05 300 / .55);
  --sig-ink: #fbf4ec;                      /* a warmer white, as if lit by the sun */
  --sig-glow: oklch(0.9 0.07 75 / .3);
}
body[data-look="day"] {
  --shade: oklch(0.36 0.07 297 / .42);    /* lilac shadows on pearl, soft (lessons: no black on light) */
  --halo: rgb(255 255 255 / .8);
  --sig-ink: oklch(0.29 0.075 318);       /* plum ink */
  --sig-glow: transparent;
}

.wp-plate .sig__ink { fill: var(--sig-ink); filter: drop-shadow(0 0 18px var(--sig-glow)); }

/* the scene layers only exist in the looks that use them */
.wp__sun, .wp__land, .wp__sparkles, .wp__sheen { display: none; }
.wp__land svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   2. SUNSET: a Phoenix monsoon dusk
   ========================================================================== */
body[data-look="sunset"] .wp__sun,
body[data-look="sunset"] .wp__land { display: block; }

/* the sky, from the palette's own hues: deep violet overhead, plum where the
   signature sits (so light ink keeps its contrast), rose, apricot, then gold
   on the horizon behind the ridges */
body[data-look="sunset"] .wp {
  background: linear-gradient(180deg in oklch,
    oklch(0.18 0.05 272) 0%,
    oklch(0.24 0.065 290) 22%,
    oklch(0.32 0.08 305) 44%,
    oklch(0.41 0.09 322) 60%,
    oklch(0.55 0.11 348) 72%,
    oklch(0.7 0.12 40) 81%,
    oklch(0.82 0.1 68) 88%,
    oklch(0.86 0.085 80) 100%);
}
/* a breath of dusk over the whole scene, so it reads as evening, not noon */
body[data-look="sunset"] .wp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: oklch(0.12 0.04 300 / .13);
}

/* the sun: pinned low, between the saguaro and the dock, just above the far
   ridge. Three parts: a wide horizon glow (so the gold lives near the sun and
   stays away from the tagline), a bloom, and a hot core. It is alive, slowly:
   the corona breathes and the horizon glow shimmers like heat over the desert */
.wp__sun {
  left: 34%; top: 75%;
  width: 70vmin; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle,
    oklch(0.97 0.05 88 / .75) 0%,
    oklch(0.88 0.1 66 / .48) 11%,
    oklch(0.75 0.13 38 / .2) 30%,
    transparent 60%);
}
.wp__sun::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 330vmin; height: 64vmin; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.84 0.12 62 / .5) 0%, oklch(0.7 0.13 28 / .24) 45%, transparent 100%);
  animation: wp-heat 11s ease-in-out infinite alternate;
}
@keyframes wp-heat { from { opacity: .86; scale: 1 .97; } to { opacity: 1; scale: 1.02 1.03; } }
.wp__sun-core {
  position: absolute; left: 50%; top: 50%; width: 8vmin; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fffdf6 0 40%, oklch(0.95 0.06 86) 62%, oklch(0.9 0.1 68) 84%, oklch(0.86 0.12 55 / 0) 100%);
  box-shadow: 0 0 3vmin .6vmin oklch(0.96 0.06 85 / .7), 0 0 11vmin 2vmin oklch(0.86 0.12 60 / .45);
  animation: wp-corona 7s ease-in-out infinite alternate;
}
@keyframes wp-corona { to { box-shadow: 0 0 3.6vmin .9vmin oklch(0.96 0.06 85 / .8), 0 0 14vmin 3vmin oklch(0.86 0.12 60 / .5); } }


/* the land: three smooth ridges and their saguaros */
.wp__land { left: 0; right: 0; bottom: 0; height: 44vh; }
.wp-far-top { stop-color: oklch(0.6 0.085 340); }
.wp-far-bot { stop-color: oklch(0.47 0.075 318); }
.wp-mid-top { stop-color: oklch(0.4 0.07 308); }
.wp-mid-bot { stop-color: oklch(0.3 0.06 302); }
.wp-ridge--near { fill: oklch(0.2 0.045 298); }
.wp-rim { fill: none; stroke: oklch(0.88 0.09 72 / .55); stroke-width: 1.2; }
.wp-cactus { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wp-cactus--far { stroke: oklch(0.5 0.075 322); }
.wp-cactus--mid { stroke: oklch(0.31 0.06 303); }
.wp-cactus--near { stroke: oklch(0.2 0.045 298); }
/* the phone's saguaros wear their ridge's own gradient, so they grow out of it without a seam */
.wp-cactus--on-mid { stroke: url(#wpMid); }
.wp-cactus--on-far { stroke: url(#wpFar); }
/* the hero saguaro's sun side catches a line of light */
/* the saguaros' rim light (js/land.js): a warm band just inside the sun-facing edge */
.wp-glow { fill: oklch(0.84 0.11 60 / .5); }

/* first stars only, high up where the sky is already night */
body[data-look="sunset"] .wp__stars { -webkit-mask: linear-gradient(#000 0 12%, transparent 34%); mask: linear-gradient(#000 0 12%, transparent 34%); }
body[data-look="sunset"] .wp__scan, body[data-look="sunset"] .wp__aurora { display: none; }
body[data-look="sunset"] .wp { --wp-grid-ink: color-mix(in oklch, var(--os-ink) 5%, transparent); }
body[data-look="sunset"] .wp.is-settled .wp__emanate { opacity: .16; }
body[data-look="sunset"] .wp__grain { opacity: .08; }
body[data-look="sunset"] .wp__fade { background: linear-gradient(to top, oklch(0.16 0.04 298 / .55) 0%, transparent 22%); }

/* the pulse glow turns to the sun's gold */
body[data-look="sunset"] .tag__glow { background: radial-gradient(ellipse, oklch(0.9 0.09 78 / .62) 0%, oklch(0.78 0.12 50 / .24) 45%, transparent 72%); }
body[data-look="sunset"] .tag__aura { background: radial-gradient(ellipse 50% 100% at 50% 50%, oklch(0.85 0.1 65 / .2) 0%, transparent 100%); }

/* a breath of dusk behind the tagline, so it holds over the warmer sky */
body[data-look="sunset"] .tag { text-shadow: 0 0 24px oklch(0.2 0.06 300 / .45); }
/* the tagline's second line turns to the sun's gold, the period with it */
body[data-look="sunset"] .tag__line--2 { color: var(--opal-warm); }
body[data-look="sunset"] .tag__dot { background: var(--opal-warm); box-shadow: 0 0 .3em var(--os-accent-2); }

@media (prefers-reduced-motion: reduce) {
  .wp__sparkle i, .wp__sun::before, .wp__sun-core { animation: none; }
}

/* ==========================================================================
   3. DAY: pearl paper
   ========================================================================== */
body[data-look="day"] .wp__sun,
body[data-look="day"] .wp__sparkles,
body[data-look="day"] .wp__sheen { display: block; }

body[data-look="day"] .wp {
  /* the board's pearl: cool lilac-grey paper with a blue haze across the top */
  background:
    linear-gradient(180deg in oklch, oklch(0.92 0.02 256) 0%, oklch(0.92 0.02 256 / 0) 45%),
    oklch(0.95 0.006 297);
  --wp-grid-ink: color-mix(in oklch, var(--os-ink) 4%, transparent);
  --wp-grid-minor-ink: transparent;
}
/* daylight: a white bloom top right, behind the specs widget */
body[data-look="day"] .wp__sun {
  left: 86%; top: 2%; width: 90vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(255 255 255 / .72) 18%, rgb(255 255 255 / .22) 40%, transparent 62%);
}
body[data-look="day"] .wp__sun-core, body[data-look="day"] .wp__sun::before { display: none; }

/* sparkles: crisp four-point opal stars where night has its stars. They
   twinkle on their own, and catch the light when the cursor passes: they
   brighten, swell, turn a little and their opal slides (--g, 0 to 1, from
   wallpaper.js), like glitter on paper under a moving light */
@property --tw { syntax: "<number>"; inherits: false; initial-value: .6; }
.wp__sparkles { inset: 0; }
.wp__sparkle {
  position: absolute; width: var(--s); aspect-ratio: 1; translate: -50% -50%;
  transform: scale(calc(1 + var(--g, 0) * .9)) rotate(calc(var(--g, 0) * 45deg));
  filter: drop-shadow(0 0 calc(var(--g, 0) * 7px) #fff);
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), filter .3s;
}
.wp__sparkle i {
  display: block; width: 100%; height: 100%;
  opacity: max(var(--tw), var(--g, 0));
  background: linear-gradient(135deg in oklch, var(--os-accent-2), var(--os-accent), var(--os-accent-3), var(--opal-silver), var(--os-accent-2));
  background-size: 300% 300%;
  background-position: calc(15% + var(--g, 0) * 70%) 50%;
  transition: background-position .5s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.6 6.4 13.6 9.4 20 10C13.6 10.6 10.6 13.6 10 20C9.4 13.6 6.4 10.6 0 10C6.4 9.4 9.4 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.6 6.4 13.6 9.4 20 10C13.6 10.6 10.6 13.6 10 20C9.4 13.6 6.4 10.6 0 10C6.4 9.4 9.4 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: wp-sparkle var(--tdur) ease-in-out var(--td) infinite;
}
@keyframes wp-sparkle { 0%, 100% { --tw: .6; } 45% { --tw: .12; } 70% { --tw: .8; } }

/* the pearl band: one soft band across the paper, the luster of a pearl (board
   Opal day). Its overtone shifts as the pointer moves, the way a real pearl
   leans ice-blue when you tilt it up and blush when you tilt it down; it also
   drifts a little sideways. --mx, --my come from wallpaper.js */
@property --my { syntax: "<number>"; inherits: true; initial-value: .5; }
.wp { transition: --my 1.6s cubic-bezier(.2, .7, .3, 1); }
.wp__sheen {
  inset: -10% 0; pointer-events: none;
  background: linear-gradient(115deg in oklch,
    transparent 28%,
    color-mix(in oklch, oklch(0.93 0.032 240 / .75) calc((1 - var(--my, .5)) * 100%), oklch(0.93 0.025 297 / .7)) 44%,
    color-mix(in oklch, oklch(0.94 0.034 356 / .7) calc(var(--my, .5) * 100%), oklch(0.94 0.025 320 / .6)) 54%,
    transparent 70%);
  translate: calc((var(--mx, .5) - .5) * 6vw) 0;
  transition: translate 1.4s cubic-bezier(.2, .7, .3, 1);
}
body[data-look="day"] :is(.wp__orb, .wp__aurora, .wp__emanate, .wp__stars, .wp__scan) { display: none; }
body[data-look="day"] .wp__grain { mix-blend-mode: multiply; opacity: .035; }
body[data-look="day"] .wp__fade { background: linear-gradient(to top, oklch(0.95 0.015 330 / .7) 0%, transparent 26%); }

/* glints: plum, lilac and blush on pearl, lit with white instead of colour */
body[data-look="day"] .wp__glint { filter: drop-shadow(0 0 calc(var(--g, 0) * 7px) #fff); }
body[data-look="day"] .wp__glint i {
  background: linear-gradient(115deg in oklch, var(--os-ink-faint), var(--os-accent), var(--os-accent-3), var(--os-accent-2), var(--os-ink-faint));
  background-size: 300% 300%;
}

/* tagline: plum and lilac; its glow becomes a pearl halo, never a coloured blur */
body[data-look="day"] .tag__glow { background: radial-gradient(ellipse, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .35) 45%, transparent 72%); }
body[data-look="day"] .tag__aura { background: radial-gradient(ellipse 50% 100% at 50% 50%, rgb(255 255 255 / .55) 0%, transparent 100%); }
body[data-look="day"] .tag__dot { box-shadow: none; }
/* day's "pulse": the word turns to pearl. Two twins of it sit exactly on the
   original letters (tagline.js), shown only by day. Each twin is the word as
   one run of text (kerning off, so its letters land where the original's
   separately-set letters do), so a gradient flows across the whole word.
     .tag__pearl  the finish, always on: a deep lilac body with a blush-to-ice
                  overtone, and one wide, soft pearl sheen drifting across it.
                  Deep enough to read on pearl paper.
     .tag__inner  the heartbeat: a brighter pink-lilac glow that blooms from
                  inside the letters on each thump, clipped to the type */
.tag__pearl, .tag__inner {
  position: absolute; left: 0; top: 0; display: none; white-space: nowrap; pointer-events: none;
  font-kerning: none; color: transparent; -webkit-background-clip: text; background-clip: text;
}
body[data-look="day"] .wp-plate.is-settled .tag__pearl,
body[data-look="day"] .wp-plate.is-settled .tag__inner { display: block; }
/* the original letters step back by day, the pearl twin takes their place */
body[data-look="day"] .wp-plate.is-settled .tag__pulse > .tag__ch { color: transparent; }
.tag__pearl {
  background-image:
    /* the sheen: wide and low, it fades in and out with no hard edge */
    linear-gradient(100deg in oklch,
      oklch(0.86 0.05 312 / 0) 0%, oklch(0.86 0.05 312 / 0) 24%,
      oklch(0.86 0.05 312 / .22) 37%, oklch(0.95 0.03 330 / .5) 50%,
      oklch(0.86 0.05 348 / .22) 63%, oklch(0.86 0.05 348 / 0) 76%, oklch(0.86 0.05 348 / 0) 100%),
    /* the body: lilac, warming to blush, cooling to ice at the foot */
    linear-gradient(180deg in oklch, oklch(0.56 0.13 297) 0%, oklch(0.5 0.14 302) 45%, oklch(0.52 0.13 335) 75%, oklch(0.55 0.11 255) 100%);
  background-size: 320% 100%, 100% 100%;
  animation: tag-sheen 10s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
/* the sheen slides along the word like light across a turning pearl */
@keyframes tag-sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
.tag__inner {
  opacity: 0; filter: blur(.6px);
  background-image: radial-gradient(ellipse 42% 78% at 50% 55%, oklch(0.88 0.1 342) 0%, oklch(0.76 0.15 330) 42%, oklch(0.66 0.14 305 / 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .tag__pearl { animation: none; background-position: 50% 0, 0 0; }
}

/* glass in daylight: an opal hairline instead of a white rim (white on pearl vanishes) */
body[data-look="day"] .lg::before {
  background:
    radial-gradient(160px 160px at var(--lx, 22%) var(--ly, 0%), #ffffff, transparent 70%),
    var(--opal);
  opacity: .85;
}
body[data-look="day"] .lg--chip::before {
  background:
    radial-gradient(70px 70px at var(--lx, 22%) var(--ly, 0%), #ffffff, transparent 70%),
    var(--opal);
}

/* the scope's glow is a screen blend, which does nothing on white: a soft lilac wash instead */
body[data-look="day"] .scope__glow { mix-blend-mode: normal; opacity: .22; }

/* folio covers: the foil multiplies on light (color-dodge washes out), the glare softens */
body[data-look="day"] .card__foil { mix-blend-mode: multiply; opacity: calc(var(--h, 0) * .2); }
body[data-look="day"] .card__glare { mix-blend-mode: soft-light; }
body[data-look="day"] .card.is-tilt .card__in { box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 22px -14px oklch(0.45 0.1 297 / .3); }

/* the sticker on pearl: a lilac lift, and a hairline so white-on-white still has an edge */
/* word stickers on pearl: the same gradients, a third lighter, so they sit softly */
body[data-look="day"] .sticker { background: linear-gradient(120deg, color-mix(in srgb, var(--w1) 66%, #fff), color-mix(in srgb, var(--w2) 66%, #fff)); }
body[data-look="day"] .sticker { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--os-border), 0 6px 14px oklch(0.45 0.08 297 / .22); }
body[data-look="day"] .stk-item { filter: drop-shadow(0 0 .6px var(--os-border)) drop-shadow(0 6px 7px oklch(0.45 0.08 297 / .22)); }

/* foil mode's title-bar sweep is a screen blend, which can't lighten a white bar: soft-light instead */
body[data-look="day"][data-konami] .win__bar::after { mix-blend-mode: soft-light; opacity: 1; }
/* foil mode's holo wordmark is pastel; on pearl it takes the deeper opal so it stays legible */
body[data-look="day"][data-konami] .menubar__wm { background-image: var(--opal); background-size: 300% 100%; }