/* =========================================================
   Edited by Vishisht — Portfolio
   ========================================================= */

:root {
  --bg: #0c0b0a;
  --bg-elev: #141312;
  --ink: #f5efe6;
  --ink-dim: #a89f93;
  --ink-faint: #5a544c;
  --accent: #ff5b2e;
  --accent-soft: #ffb38a;
  --line: rgba(245, 239, 230, 0.08);
  --line-strong: rgba(245, 239, 230, 0.18);

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --gutter: clamp(1.5rem, 4vw, 4rem);
  --section-pad: clamp(5rem, 10vw, 9rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

html { background: var(--bg); }

body {
  font-family: var(--font-display);
  background: transparent;
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ===== Film grain overlay ===== */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain-shift 8s steps(8) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -3%); }
  20%  { transform: translate(3%, -8%); }
  30%  { transform: translate(-3%, 6%); }
  40%  { transform: translate(7%, 2%); }
  50%  { transform: translate(-7%, -4%); }
  60%  { transform: translate(4%, 7%); }
  70%  { transform: translate(-4%, -2%); }
  80%  { transform: translate(6%, 4%); }
  90%  { transform: translate(-6%, -6%); }
  100% { transform: translate(0, 0); }
}

/* ===== Cursor: small dot + soft glow halo ===== */
.cursor-dot,
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-glow { display: block; }
}

.cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 201;
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
  mix-blend-mode: difference;
  box-shadow:
    0 0 8px rgba(255, 91, 46, 0.85),
    0 0 18px rgba(255, 91, 46, 0.6);
}

.cursor-dot.hovering {
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
}

.cursor-glow {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  z-index: 199;
  background: radial-gradient(
    circle,
    rgba(255, 91, 46, 0.22) 0%,
    rgba(255, 91, 46, 0.12) 22%,
    rgba(255, 91, 46, 0.04) 48%,
    rgba(255, 91, 46, 0) 70%
  );
  filter: blur(6px);
  mix-blend-mode: screen;
  transition: width 0.4s ease, height 0.4s ease;
}

.cursor-glow.hovering {
  width: 480px;
  height: 480px;
}

/* ===== Cursor trail particles ===== */
.cursor-trail-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 198;
  display: none;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-trail-layer { display: block; }
}

.cursor-trail-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 91, 46, 0.75) 0%,
    rgba(255, 91, 46, 0.35) 40%,
    rgba(255, 91, 46, 0) 75%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(2px);
  will-change: transform, opacity;
}

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  background: linear-gradient(to bottom, rgba(12, 11, 10, 0.85), rgba(12, 11, 10, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.nav-logo-text {
  position: relative;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.nav-clock {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  display: none;
  font-variant-numeric: tabular-nums;
}

.nav-clock::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255, 91, 46, 0.6);
  animation: pulse 1.6s ease-in-out infinite;
}

@media (min-width: 720px) {
  .nav-clock { display: block; }
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.nav-links a {
  color: var(--ink-dim);
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a:hover::after {
  width: 100%;
}

@media (max-width: 560px) {
  .nav-links { gap: 1rem; }
  .nav-links li:nth-child(3) { display: none; }
}

/* ===== Hero ===== */
.hero {
  min-height: 100vh;
  padding: 8rem var(--gutter) 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: min(900px, 100%);
}

.hero-meta-value em {
  color: var(--ink-faint);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

/* Floating side photos on the right of the hero. Replaced by real
   images when ./assets/hero-1.jpg / hero-2.jpg are placed there. */
.hero-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  border-radius: 8px;
  border: 1px solid rgba(245, 239, 230, 0.08);
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  opacity: 0.32;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) contrast(1.05);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.45s ease;
  will-change: transform;
  pointer-events: auto;
}

.hero-photo:hover {
  box-shadow: 0 38px 72px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 91, 46, 0.16);
}

.hero-photo::after {
  /* subtle scanline / film overlay so empty placeholders don't read as bug */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 91, 46, 0.10), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.02) 14px 15px);
  pointer-events: none;
}

.hero-photo-a {
  right: 6vw;
  top: 14vh;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 3 / 4;
  transform: rotate(3deg);
  background-image: url("./assets/hero-1.jpg?v=7");
}

.hero-photo-b {
  right: 18vw;
  bottom: 10vh;
  width: clamp(180px, 18vw, 280px);
  aspect-ratio: 4 / 5;
  transform: rotate(-5deg);
  background-image: url("./assets/hero-2.jpg?v=7");
}

@media (max-width: 900px) {
  .hero-photo-a { right: -8vw; top: auto; bottom: 30vh; opacity: 0.18; }
  .hero-photo-b { right: auto; left: -6vw; bottom: 6vh; opacity: 0.16; }
}

@media (max-width: 560px) {
  .hero-photos { opacity: 0.7; }
  .hero-photo-a { width: 180px; }
  .hero-photo-b { width: 150px; }
}

.hero-greetings {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--accent);
  height: 1.5em;
  position: relative;
  margin-bottom: 1.25rem;
}

.greeting {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.greeting.active {
  opacity: 1;
  transform: translateY(0);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero-inner {
  display: inline-block;
  transform: translateY(110%);
  animation: slide-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-line em {
  font-weight: 400;
  color: var(--accent);
}

.hero-prefix {
  font-size: clamp(1.75rem, 6.5vw, 5.5rem);
  line-height: 1;
  margin-bottom: 0.15em;
  letter-spacing: -0.03em;
  color: var(--ink-dim);
}

.hero-prefix em {
  color: var(--accent);
}

.hero-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 14vw, 13rem);
  line-height: 0.9;
  position: relative;
}

/* Hero name — a light-pass "sheen" sweeps across the letters on hover.
   Effect lives inside the glyph fill (background-clip: text), so it is NOT
   clipped by .hero-line's overflow:hidden, and stays GPU-friendly. */
.hero-name-text {
  display: inline-block;
  color: var(--ink);
}

/* Per-letter magnetic scatter: each letter flees the cursor and springs
   back when it leaves (driven by script.js). Transform/opacity only = GPU. */
.hn-letter {
  display: inline-block;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hn-letter { transition: none; }
}

.hero-line:nth-child(1) .hero-inner { animation-delay: 0.15s; }
.hero-line:nth-child(2) .hero-inner { animation-delay: 0.35s; }

@keyframes slide-up {
  to { transform: translateY(0); }
}

.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-dim);
  max-width: 32ch;
  margin-bottom: 4rem;
  opacity: 0;
  animation: fade-in 0.8s ease 0.9s forwards;
}

.hero-tag-accent {
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

@keyframes fade-in {
  to { opacity: 1; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 700px;
  opacity: 0;
  animation: fade-in 0.8s ease 1.1s forwards;
}

.hero-meta-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero-meta-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.hero-meta-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  opacity: 0;
  animation: fade-in 0.8s ease 1.3s forwards, bob 2.5s ease-in-out infinite 2s;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ===== Generic section bits ===== */
section {
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--line);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label span {
  color: var(--accent);
}

/* ===== Reel ===== */
.reel-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev);
  aspect-ratio: 16 / 9;
  max-width: 1300px;
  margin: 0 auto;
}

.reel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background:
    radial-gradient(ellipse at center, rgba(255, 91, 46, 0.08), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.015) 12px 13px),
    var(--bg-elev);
}

.play-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.play-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05);
}

.play-btn:hover::before {
  opacity: 1;
  inset: -12px;
}

.reel-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
}

/* film strip perforations */
.film-strip {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background-image:
    radial-gradient(circle at 12px 50%, rgba(0,0,0,0.85) 4px, transparent 5px),
    linear-gradient(var(--bg), var(--bg));
  background-size: 30px 100%;
  background-repeat: repeat-x;
  z-index: 2;
}

.film-strip.top { top: 0; }
.film-strip.bottom { bottom: 0; transform: scaleY(-1); }

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
}

.about-text p {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

.about-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  line-height: 1.25;
  color: var(--ink) !important;
  margin-bottom: 2rem !important;
}

.about-side {
  display: grid;
  gap: 2rem;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 800px) {
  .about-side {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 2rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.about-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Compact size for large numbers (e.g. view counts) so they don't overflow */
.about-stat-num-lg {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
}

.about-stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== Skills ===== */
.skills-marquee {
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)) 4rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}

.marquee-track {
  display: inline-flex;
  gap: 2rem;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink);
}

.marquee-track span:nth-child(even) {
  color: var(--accent);
  font-style: normal;
  font-family: var(--font-display);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.skill-card {
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elev);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.skill-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}

.skill-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.skill-card:hover::before {
  transform: scaleY(1);
}

.skill-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.skill-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0.75rem 0 0.5rem;
  color: var(--ink);
}

.skill-card p {
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ===== Work ===== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.work-card {
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px);
}

.work-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 91, 46, 0) 0%, rgba(255, 91, 46, 0) 60%);
  transition: background 0.4s ease;
  pointer-events: none;
}

.work-card:hover .work-thumb {
  border-color: var(--accent);
}

.work-card:hover .work-thumb::after {
  background: radial-gradient(circle at center, rgba(255, 91, 46, 0.15) 0%, rgba(255, 91, 46, 0) 60%);
}

.work-card:hover {
  transform: translateY(-6px);
}

.work-thumb-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.work-runtime {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.work-meta {
  padding: 1rem 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.work-meta h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}

.work-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ===== Contact ===== */
.contact {
  padding-bottom: 2rem;
}

.contact-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  max-width: 14ch;
}

.contact-headline em {
  color: var(--accent);
}

.contact-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--ink-dim);
  margin-bottom: 4rem;
  max-width: 50ch;
}

.contact-links {
  display: grid;
  gap: 1rem;
  margin-bottom: 6rem;
  max-width: 800px;
}

.contact-link {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: all 0.3s ease;
  background: var(--bg-elev);
}

.contact-link:hover {
  border-color: var(--accent);
  transform: translateX(8px);
}

.contact-link:hover svg {
  color: var(--accent);
  transform: translate(2px, -2px);
}

.contact-link-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.contact-link-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink);
}

.contact-link svg {
  color: var(--ink-dim);
  transition: all 0.3s ease;
}

@media (max-width: 540px) {
  .contact-link {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }
  .contact-link-label {
    grid-column: 1 / -1;
  }
}

/* ===== Footer ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

.footer-left {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.footer a {
  color: var(--ink-dim);
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--accent);
}

/* ===== Reveal animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Photos ===== */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 1.25rem;
  perspective: 1400px;
}

.photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.photo:hover {
  border-color: var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.photo-main { grid-column: 1 / span 7;  grid-row: span 7; }
.photo-a    { grid-column: 8 / span 5;  grid-row: span 4; }
.photo-b    { grid-column: 8 / span 5;  grid-row: span 3; }
.photo-c    { grid-column: 1 / span 12; grid-row: span 5; }

@media (max-width: 900px) {
  .photos-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 60px; }
  .photo-main { grid-column: 1 / span 6;  grid-row: span 6; }
  .photo-a    { grid-column: 1 / span 3;  grid-row: span 4; }
  .photo-b    { grid-column: 4 / span 3;  grid-row: span 4; }
  .photo-c    { grid-column: 1 / span 6;  grid-row: span 4; }
}

.photo-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 91, 46, 0.10), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.018) 14px 15px),
    var(--bg-elev);
  color: var(--ink-dim);
}

.photo-ph-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-transform: uppercase;
}

.photo-ph-dim {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Phone frames for shorts ===== */
.work-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--ink-dim);
  margin: -2rem 0 3rem;
}

.work-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ===== Work sub-sections (Vertical / Horizontal) ===== */
.work-subgroup {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.work-subgroup:last-child { margin-bottom: 0; }

.work-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.work-subheading h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
}

.work-subheading-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  font-size: 0.85em;
}

.work-subheading-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.work-grid-vertical {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1100px;
}

.work-grid-horizontal {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

/* In the horizontal grid, all cards span 1 (no double-wide) since they're 16:9 */
.work-grid-horizontal .work-card.is-wide {
  grid-column: span 1;
}

@media (max-width: 540px) {
  .work-grid-horizontal {
    grid-template-columns: 1fr;
  }
}

/* Caption under each work title */
.work-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0.25rem 0 0.4rem;
}

.work-meta h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.phone-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, #1a1816 0%, #0e0d0c 100%);
  border-radius: 28px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.phone-frame .work-thumb {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 91, 46, 0.12), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #1a1816 0%, #0e0d0c 100%);
}

.phone-frame .work-thumb-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.phone-frame .work-runtime {
  top: auto;
  bottom: 1rem;
  right: 50%;
  transform: translateX(50%);
  font-size: 0.65rem;
}

.work-platform {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.work-card:hover .phone-frame {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 91, 46, 0.25);
}

/* ===== Real video embeds ===== */
.work-thumb.is-embed {
  display: block;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.work-thumb.is-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

/* Hide the notch on IG embed cards so we don't cover the embed's header */
.has-embed .phone-frame .phone-notch { display: none; }

/* Wide card for landscape video (YouTube 16:9) */
.work-card.is-wide {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .work-card.is-wide { grid-column: span 1; }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #1a1816 0%, #0e0d0c 100%);
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
  overflow: hidden;
}

.video-frame .work-thumb {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  aspect-ratio: auto;
  border: none;
}

.work-card:hover .video-frame {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 91, 46, 0.25);
}

.work-meta .work-tag[href] {
  transition: color 0.25s ease;
}
.work-meta .work-tag[href]:hover {
  color: var(--accent);
}

/* ===== Work — vertical reel case studies (phone embed + editorial) ===== */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.reel-card {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(0.85rem, 1.5vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(255, 91, 46, 0.05), transparent 60%),
    var(--bg-elev);
  transition: border-color 0.35s ease, background 0.35s ease;
}

.reel-card:hover {
  border-color: var(--line-strong);
}

/* Phone holds its width; the 9/16 aspect-ratio rule sets the height */
.reel-card .phone-frame {
  flex: 0 0 clamp(150px, 17vw, 184px);
  align-self: flex-start;
  border-radius: 22px;
}

.reel-card:hover .phone-frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 91, 46, 0.22);
}

.reel-info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.reel-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reel-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.reel-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.reel-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.1rem 0;
}

.reel-chips li {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.03);
}

.reel-actions {
  margin-top: auto;
  padding-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.reel-process-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.reel-process-btn:hover,
.reel-process-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 91, 46, 0.06);
  outline: none;
}

.reel-watch {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

.reel-watch:hover,
.reel-watch:focus-visible {
  color: var(--accent);
  outline: none;
}

@media (max-width: 560px) {
  .reel-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .reel-card .phone-frame {
    flex-basis: auto;
    width: min(220px, 70%);
    align-self: center;
  }
  .reel-info { width: 100%; align-items: center; }
  .reel-chips, .reel-actions { justify-content: center; }
  .reel-actions { margin-top: 1rem; }
}

/* ===== Work — horizontal 16:9 case studies (landscape embed + editorial) ===== */
.reel-grid-horizontal {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}

/* Landscape variant: video on top (16:9), editorial info beneath */
.reel-card-horizontal {
  flex-direction: column;
  gap: clamp(0.85rem, 1.6vw, 1.2rem);
}

.reel-card-horizontal .video-frame {
  align-self: stretch;
  border-radius: 16px;
}

/* Landscape cards sit in an equal-height grid; let the actions follow the
   chips instead of floating to the bottom (avoids a dead gap in short cards). */
.reel-card-horizontal .reel-actions {
  margin-top: 0.6rem;
}

.reel-card-horizontal:hover .video-frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 91, 46, 0.22);
}

@media (max-width: 560px) {
  /* Base .reel-card centers on mobile; landscape cards read better left-aligned */
  .reel-card-horizontal { align-items: stretch; text-align: left; }
  .reel-card-horizontal .reel-info { align-items: flex-start; }
  .reel-card-horizontal .reel-chips,
  .reel-card-horizontal .reel-actions { justify-content: flex-start; }
}

/* ===== Reel process modal ===== */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.reel-modal[hidden] { display: none; }

.reel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reel-modal-card {
  position: relative;
  width: min(640px, 100%);
  max-height: min(85vh, 760px);
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse at top right, rgba(255, 91, 46, 0.1), transparent 55%),
    linear-gradient(160deg, #18100d 0%, #110d0b 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-modal.open .reel-modal-backdrop { opacity: 1; }
.reel-modal.open .reel-modal-card { opacity: 1; transform: translateY(0) scale(1); }

.reel-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.reel-modal-close:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.reel-modal-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.reel-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 28ch;
  padding-right: 2.5rem;
}

.reel-modal-body p {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}

.reel-modal-body p:last-child { margin-bottom: 0; }

.reel-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.reel-modal-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 91, 46, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .reel-modal-backdrop,
  .reel-modal-card { transition: none; }
  .reel-modal-card { transform: none; }
}

/* ===== 3D scroll reveal (premium feel) =====
   NOTE: perspective is applied per-element via the transform value
   (not on body) — otherwise position:fixed children (cursor-dot, nav)
   get re-anchored to body and drift on scroll. */
.scroll-3d {
  opacity: 0;
  transform: perspective(1500px) translate3d(0, 60px, -120px) rotateX(8deg);
  transform-origin: 50% 0%;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.scroll-3d.in {
  opacity: 1;
  transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0);
}

/* ===== Section intros / shared bits ===== */
.section-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink-dim);
  margin: -1.5rem 0 3rem;
  max-width: 55ch;
}

/* ===== About — background portrait ===== */
.about { position: relative; overflow: hidden; }

.about-bg-photo {
  position: absolute;
  right: -3vw;
  top: 50%;
  transform: translateY(-50%) rotate(2deg);
  width: clamp(280px, 36vw, 520px);
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: var(--bg-elev);
  background-image: url("./assets/about-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: saturate(0.8) contrast(1.05) blur(0.5px);
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(245, 239, 230, 0.08);
}

.about-bg-photo::after {
  /* gradient mask so it bleeds into the bg on the left edge */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 35%),
    radial-gradient(ellipse at 30% 30%, rgba(255, 91, 46, 0.08), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.02) 14px 15px);
}

.about-grid { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .about-bg-photo {
    right: -10vw;
    width: 60vw;
    opacity: 0.14;
  }
}

/* ===== Podcast Specialty (skills section) ===== */
.specialty {
  position: relative;
  margin: 3rem 0 4rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at top right, rgba(255, 91, 46, 0.10), transparent 55%),
    linear-gradient(160deg, #18100d 0%, #110d0b 100%);
  overflow: hidden;
}

.specialty::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

.specialty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.specialty-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 91, 46, 0.85);
  animation: pulse 1.6s ease-in-out infinite;
}

.specialty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
  max-width: 22ch;
}

.specialty-body {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 65ch;
  margin-bottom: 1.75rem;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.specialty-tags span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.03);
  transition: all 0.25s ease;
}

.specialty-tags span:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 91, 46, 0.06);
}

/* ===== Hobbies — horizontal carousel ===== */
.hobbies-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter));
  padding: 1rem 0;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%);
}

.hobbies-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding: 0 var(--gutter);
  animation: hobbies-scroll 40s linear infinite;
}

.hobbies-carousel:hover .hobbies-track {
  animation-play-state: paused;
}

@keyframes hobbies-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Flippable 3D card. Hover flips the inner to reveal a back face
   (image placeholder; drop ./assets/hobby-*.jpg to fill it). */
.hobby-card {
  position: relative;
  flex: 0 0 300px;
  aspect-ratio: 5 / 6;
  perspective: 1100px;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
}

.hobby-card:hover {
  transform: translateY(-4px);
}

.hobby-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hobby-card:hover .hobby-inner {
  transform: rotateY(180deg);
}

.hobby-front,
.hobby-back {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.hobby-front {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
}

.hobby-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  /* Fallback texture when the image hasn't been placed yet */
  background-color: var(--bg-elev);
}

.hobby-back::before {
  /* Soft gradient + grain overlay on top of the (eventual) image */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%),
    radial-gradient(ellipse at 70% 20%, rgba(255, 91, 46, 0.10), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.02) 14px 15px);
  pointer-events: none;
}

.hobby-back-caption {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.hobby-back-hint {
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  opacity: 0.7;
}

.hobby-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hobby-icon svg {
  width: 100%;
  height: 100%;
}

.hobby-front h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.hobby-front p {
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.55;
}

/* ===== Testimonials / Kind Words ===== */
.kind-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 880px) {
  .kind-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.kind-portrait {
  position: sticky;
  top: 7rem;
}

@media (max-width: 880px) {
  .kind-portrait { position: static; }
}

.kind-portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--bg-elev);
  background-image: url("./assets/about.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.kind-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kind-portrait-frame a {
  display: block;
  width: 100%;
  height: 100%;
}

.kind-portrait-frame a img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kind-portrait-frame a:hover img {
  transform: scale(1.04);
}

.kind-portrait-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 91, 46, 0.10), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.02) 14px 15px),
    var(--bg-elev);
}

.kind-portrait-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-transform: uppercase;
}

.kind-portrait-hint {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

.kind-portrait figcaption {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-dim);
  text-align: center;
}

/* Carousel of colleague quotes. Auto-scrolls; pauses on hover.
   Collapses to a swipeable scroll-snap rail on small screens. */
.kind-carousel {
  position: relative;
  overflow: hidden;
  min-width: 0; /* keeps grid track from being blown out by max-content child */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  padding: 0.5rem 0;
}

.kind-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: kind-scroll 80s linear infinite;
}

.kind-carousel:hover .kind-track {
  animation-play-state: paused;
}

@keyframes kind-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-elev);
  position: relative;
  transition: border-color 0.3s ease,
              background 0.3s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial:hover {
  border-color: var(--line-strong);
  border-left-color: var(--accent);
  background: linear-gradient(160deg, #1a1411 0%, #131110 100%);
  transform: translateY(-4px);
}

.testimonial p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.5rem;
  flex: 1;
}

.testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: none;
  padding: 0;
  font-family: var(--font-display);
}

.testimonial footer strong {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.testimonial footer span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* On narrow screens, drop the auto-loop and let users swipe */
@media (max-width: 720px) {
  .kind-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kind-track {
    animation: none;
    width: max-content;
    padding: 0 var(--gutter);
  }
  .testimonial {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .greeting { opacity: 1; transform: none; }
  .greeting:not(.active) { display: none; }
  .reveal, .scroll-3d { opacity: 1; transform: none; }
  .hero-inner { transform: none; }
}


/* ===== Deep-space backdrop — distant stars + occasional shooting stars =====
   Fixed layer at z-index:-1, above the html bg, behind all content. GPU-only.
   .sky-far / .sky-near get a scroll-driven translateY (parallax) from script.js. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.sky-stars { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; will-change: transform, opacity; }
.sky-far  { box-shadow: 1326px 617px 0 0.2px rgba(255,255,255,0.5),1617px 2666px 0 0.2px rgba(255,255,255,0.5),197px 296px 0 0.2px rgba(255,255,255,0.5),2194px 385px 0 0.2px rgba(255,255,255,0.5),1497px 2387px 0 0.2px rgba(255,255,255,0.5),237px 2078px 0 0.2px rgba(255,255,255,0.5),879px 153px 0 0.2px rgba(255,255,255,0.5),352px 1776px 0 0.2px rgba(255,255,255,0.5),1712px 286px 0 0.2px rgba(255,255,255,0.5),985px 371px 0 0.2px rgba(255,255,255,0.5),2257px 1738px 0 0.2px rgba(255,255,255,0.5),242px 2316px 0 0.2px rgba(255,255,255,0.5),507px 914px 0 0.2px rgba(255,255,255,0.5),2387px 253px 0 0.2px rgba(255,255,255,0.5),2363px 2398px 0 0.2px rgba(255,255,255,0.5),1624px 203px 0 0.2px rgba(255,255,255,0.5),905px 190px 0 0.2px rgba(255,255,255,0.5),2280px 545px 0 0.2px rgba(255,255,255,0.5),1186px 1716px 0 0.2px rgba(255,255,255,0.5),590px 2214px 0 0.2px rgba(255,255,255,0.5),482px 2338px 0 0.2px rgba(255,255,255,0.5),1263px 2294px 0 0.2px rgba(255,255,255,0.5),740px 422px 0 0.2px rgba(255,255,255,0.5),2382px 2339px 0 0.2px rgba(255,255,255,0.5),769px 1525px 0 0.2px rgba(255,255,255,0.5),399px 2243px 0 0.2px rgba(255,255,255,0.5),257px 2311px 0 0.2px rgba(255,255,255,0.5),244px 2535px 0 0.2px rgba(255,255,255,0.5),843px 2033px 0 0.2px rgba(255,255,255,0.5),2177px 1751px 0 0.2px rgba(255,255,255,0.5),1286px 1907px 0 0.2px rgba(255,255,255,0.5),2398px 1856px 0 0.2px rgba(255,255,255,0.5),1481px 1227px 0 0.2px rgba(255,255,255,0.5),1017px 736px 0 0.2px rgba(255,255,255,0.5),999px 335px 0 0.2px rgba(255,255,255,0.5),2352px 1229px 0 0.2px rgba(255,255,255,0.5),2151px 2027px 0 0.2px rgba(255,255,255,0.5),1406px 2987px 0 0.2px rgba(255,255,255,0.5),1838px 1179px 0 0.2px rgba(255,255,255,0.5),2494px 299px 0 0.2px rgba(255,255,255,0.5),483px 2096px 0 0.2px rgba(255,255,255,0.5),1712px 675px 0 0.2px rgba(255,255,255,0.5),1401px 622px 0 0.2px rgba(255,255,255,0.5),2002px 1727px 0 0.2px rgba(255,255,255,0.5),160px 2737px 0 0.2px rgba(255,255,255,0.5),317px 3131px 0 0.2px rgba(255,255,255,0.5),2285px 2347px 0 0.2px rgba(255,255,255,0.5),1285px 1393px 0 0.2px rgba(255,255,255,0.5),1434px 2434px 0 0.2px rgba(255,255,255,0.5),2034px 2375px 0 0.2px rgba(255,255,255,0.5),1868px 281px 0 0.2px rgba(255,255,255,0.5),383px 1105px 0 0.2px rgba(255,255,255,0.5),1941px 2855px 0 0.2px rgba(255,255,255,0.5),266px 248px 0 0.2px rgba(255,255,255,0.5),1268px 2650px 0 0.2px rgba(255,255,255,0.5),2367px 2790px 0 0.2px rgba(255,255,255,0.5),1825px 1165px 0 0.2px rgba(255,255,255,0.5),1580px 2738px 0 0.2px rgba(255,255,255,0.5),1421px 92px 0 0.2px rgba(255,255,255,0.5),1891px 1455px 0 0.2px rgba(255,255,255,0.5),688px 2502px 0 0.2px rgba(255,255,255,0.5),479px 2022px 0 0.2px rgba(255,255,255,0.5),241px 893px 0 0.2px rgba(255,255,255,0.5),1177px 529px 0 0.2px rgba(255,255,255,0.5),1014px 1629px 0 0.2px rgba(255,255,255,0.5),1601px 2033px 0 0.2px rgba(255,255,255,0.5),330px 681px 0 0.2px rgba(255,255,255,0.5),1839px 1645px 0 0.2px rgba(255,255,255,0.5),2250px 1138px 0 0.2px rgba(255,255,255,0.5),560px 1763px 0 0.2px rgba(255,255,255,0.5),2253px 1140px 0 0.2px rgba(255,255,255,0.5),1701px 1469px 0 0.2px rgba(255,255,255,0.5),1558px 945px 0 0.2px rgba(255,255,255,0.5),618px 339px 0 0.2px rgba(255,255,255,0.5),721px 619px 0 0.2px rgba(255,255,255,0.5),950px 2697px 0 0.2px rgba(255,255,255,0.5),955px 49px 0 0.2px rgba(255,255,255,0.5),1986px 2413px 0 0.2px rgba(255,255,255,0.5),746px 1076px 0 0.2px rgba(255,255,255,0.5),1154px 16px 0 0.2px rgba(255,255,255,0.5),596px 1716px 0 0.2px rgba(255,255,255,0.5),2189px 1512px 0 0.2px rgba(255,255,255,0.5),2497px 2319px 0 0.2px rgba(255,255,255,0.5),1305px 514px 0 0.2px rgba(255,255,255,0.5),2111px 2529px 0 0.2px rgba(255,255,255,0.5),221px 1870px 0 0.2px rgba(255,255,255,0.5),2290px 1607px 0 0.2px rgba(255,255,255,0.5),1630px 1634px 0 0.2px rgba(255,255,255,0.5),1614px 424px 0 0.2px rgba(255,255,255,0.5),1972px 2598px 0 0.2px rgba(255,255,255,0.5),1640px 254px 0 0.2px rgba(255,255,255,0.5),780px 275px 0 0.2px rgba(255,255,255,0.5),855px 1804px 0 0.2px rgba(255,255,255,0.5),664px 450px 0 0.2px rgba(255,255,255,0.5),1392px 2460px 0 0.2px rgba(255,255,255,0.5),215px 419px 0 0.2px rgba(255,255,255,0.5),0px 2321px 0 0.2px rgba(255,255,255,0.5),619px 2197px 0 0.2px rgba(255,255,255,0.5),415px 1489px 0 0.2px rgba(255,255,255,0.5),2513px 104px 0 0.2px rgba(255,255,255,0.5),288px 851px 0 0.2px rgba(255,255,255,0.5),2515px 1541px 0 0.2px rgba(255,255,255,0.5),608px 2598px 0 0.2px rgba(255,255,255,0.5),1033px 1422px 0 0.2px rgba(255,255,255,0.5),2466px 1491px 0 0.2px rgba(255,255,255,0.5),1942px 503px 0 0.2px rgba(255,255,255,0.5),472px 1999px 0 0.2px rgba(255,255,255,0.5),1908px 1967px 0 0.2px rgba(255,255,255,0.5),1981px 1277px 0 0.2px rgba(255,255,255,0.5),351px 590px 0 0.2px rgba(255,255,255,0.5),418px 3070px 0 0.2px rgba(255,255,255,0.5),1403px 3032px 0 0.2px rgba(255,255,255,0.5),1084px 1960px 0 0.2px rgba(255,255,255,0.5),661px 2114px 0 0.2px rgba(255,255,255,0.5),94px 840px 0 0.2px rgba(255,255,255,0.5),2163px 1481px 0 0.2px rgba(255,255,255,0.5),600px 2826px 0 0.2px rgba(255,255,255,0.5),2224px 110px 0 0.2px rgba(255,255,255,0.5),2163px 1220px 0 0.2px rgba(255,255,255,0.5),372px 2851px 0 0.2px rgba(255,255,255,0.5),1069px 2123px 0 0.2px rgba(255,255,255,0.5),1502px 684px 0 0.2px rgba(255,255,255,0.5),1456px 3161px 0 0.2px rgba(255,255,255,0.5),912px 2181px 0 0.2px rgba(255,255,255,0.5),2218px 3191px 0 0.2px rgba(255,255,255,0.5),2059px 1350px 0 0.2px rgba(255,255,255,0.5),913px 2511px 0 0.2px rgba(255,255,255,0.5),799px 980px 0 0.2px rgba(255,255,255,0.5),1641px 3030px 0 0.2px rgba(255,255,255,0.5),928px 818px 0 0.2px rgba(255,255,255,0.5),2120px 2018px 0 0.2px rgba(255,255,255,0.5),1456px 2994px 0 0.2px rgba(255,255,255,0.5),118px 114px 0 0.2px rgba(255,255,255,0.5),1144px 1934px 0 0.2px rgba(255,255,255,0.5),1061px 793px 0 0.2px rgba(255,255,255,0.5),2478px 1410px 0 0.2px rgba(255,255,255,0.5),1831px 2961px 0 0.2px rgba(255,255,255,0.5),1431px 1493px 0 0.2px rgba(255,255,255,0.5),329px 903px 0 0.2px rgba(255,255,255,0.5),418px 929px 0 0.2px rgba(255,255,255,0.5),1925px 805px 0 0.2px rgba(255,255,255,0.5),1383px 837px 0 0.2px rgba(255,255,255,0.5),1976px 2556px 0 0.2px rgba(255,255,255,0.5),2499px 7px 0 0.2px rgba(255,255,255,0.5),1963px 2674px 0 0.2px rgba(255,255,255,0.5),1409px 2634px 0 0.2px rgba(255,255,255,0.5),347px 2705px 0 0.2px rgba(255,255,255,0.5),491px 1591px 0 0.2px rgba(255,255,255,0.5),816px 1958px 0 0.2px rgba(255,255,255,0.5),731px 1777px 0 0.2px rgba(255,255,255,0.5),1361px 355px 0 0.2px rgba(255,255,255,0.5),1621px 1897px 0 0.2px rgba(255,255,255,0.5),1644px 3044px 0 0.2px rgba(255,255,255,0.5),347px 2968px 0 0.2px rgba(255,255,255,0.5),650px 696px 0 0.2px rgba(255,255,255,0.5),520px 112px 0 0.2px rgba(255,255,255,0.5),619px 2419px 0 0.2px rgba(255,255,255,0.5),1906px 2686px 0 0.2px rgba(255,255,255,0.5),598px 2505px 0 0.2px rgba(255,255,255,0.5),2440px 1942px 0 0.2px rgba(255,255,255,0.5),1435px 638px 0 0.2px rgba(255,255,255,0.5),2247px 2245px 0 0.2px rgba(255,255,255,0.5),536px 87px 0 0.2px rgba(255,255,255,0.5),58px 2975px 0 0.2px rgba(255,255,255,0.5),420px 2156px 0 0.2px rgba(255,255,255,0.5),570px 1776px 0 0.2px rgba(255,255,255,0.5),797px 864px 0 0.2px rgba(255,255,255,0.5),114px 1031px 0 0.2px rgba(255,255,255,0.5),871px 1199px 0 0.2px rgba(255,255,255,0.5),2052px 985px 0 0.2px rgba(255,255,255,0.5),2402px 1335px 0 0.2px rgba(255,255,255,0.5),1062px 2229px 0 0.2px rgba(255,255,255,0.5),1716px 536px 0 0.2px rgba(255,255,255,0.5),249px 3030px 0 0.2px rgba(255,255,255,0.5),1449px 1876px 0 0.2px rgba(255,255,255,0.5),2389px 2116px 0 0.2px rgba(255,255,255,0.5),1722px 2054px 0 0.2px rgba(255,255,255,0.5),535px 2178px 0 0.2px rgba(255,255,255,0.5),621px 2144px 0 0.2px rgba(255,255,255,0.5),2091px 76px 0 0.2px rgba(255,255,255,0.5),1802px 3180px 0 0.2px rgba(255,255,255,0.5),750px 2492px 0 0.2px rgba(255,255,255,0.5),16px 3178px 0 0.2px rgba(255,255,255,0.5),613px 705px 0 0.2px rgba(255,255,255,0.5),579px 1939px 0 0.2px rgba(255,255,255,0.5),2535px 2970px 0 0.2px rgba(255,255,255,0.5),492px 2279px 0 0.2px rgba(255,255,255,0.5),252px 1335px 0 0.2px rgba(255,255,255,0.5),2123px 2173px 0 0.2px rgba(255,255,255,0.5),2275px 1976px 0 0.2px rgba(255,255,255,0.5),434px 2294px 0 0.2px rgba(255,255,255,0.5),232px 1017px 0 0.2px rgba(255,255,255,0.5),783px 1134px 0 0.2px rgba(255,255,255,0.5),172px 3163px 0 0.2px rgba(255,255,255,0.5),400px 2079px 0 0.2px rgba(255,255,255,0.5),1852px 2300px 0 0.2px rgba(255,255,255,0.5),114px 3112px 0 0.2px rgba(255,255,255,0.5),259px 1815px 0 0.2px rgba(255,255,255,0.5),1333px 2508px 0 0.2px rgba(255,255,255,0.5),2070px 2482px 0 0.2px rgba(255,255,255,0.5),2097px 816px 0 0.2px rgba(255,255,255,0.5),1135px 1852px 0 0.2px rgba(255,255,255,0.5),2081px 2184px 0 0.2px rgba(255,255,255,0.5),1958px 2079px 0 0.2px rgba(255,255,255,0.5),1014px 2863px 0 0.2px rgba(255,255,255,0.5),2143px 1063px 0 0.2px rgba(255,255,255,0.5),2291px 829px 0 0.2px rgba(255,255,255,0.5),1833px 561px 0 0.2px rgba(255,255,255,0.5),1706px 498px 0 0.2px rgba(255,255,255,0.5),1607px 1810px 0 0.2px rgba(255,255,255,0.5),1294px 297px 0 0.2px rgba(255,255,255,0.5),985px 1754px 0 0.2px rgba(255,255,255,0.5),299px 871px 0 0.2px rgba(255,255,255,0.5),1240px 501px 0 0.2px rgba(255,255,255,0.5),632px 2933px 0 0.2px rgba(255,255,255,0.5),1499px 585px 0 0.2px rgba(255,255,255,0.5),1036px 562px 0 0.2px rgba(255,255,255,0.5),1915px 899px 0 0.2px rgba(255,255,255,0.5),385px 1631px 0 0.2px rgba(255,255,255,0.5),1995px 666px 0 0.2px rgba(255,255,255,0.5),916px 661px 0 0.2px rgba(255,255,255,0.5),1767px 2111px 0 0.2px rgba(255,255,255,0.5),1654px 1389px 0 0.2px rgba(255,255,255,0.5),1725px 801px 0 0.2px rgba(255,255,255,0.5),1460px 1304px 0 0.2px rgba(255,255,255,0.5),377px 2957px 0 0.2px rgba(255,255,255,0.5),1498px 79px 0 0.2px rgba(255,255,255,0.5),1384px 2269px 0 0.2px rgba(255,255,255,0.5),1878px 1804px 0 0.2px rgba(255,255,255,0.5),74px 1574px 0 0.2px rgba(255,255,255,0.5),1357px 2119px 0 0.2px rgba(255,255,255,0.5),2555px 1210px 0 0.2px rgba(255,255,255,0.5),2098px 263px 0 0.2px rgba(255,255,255,0.5),462px 936px 0 0.2px rgba(255,255,255,0.5),429px 344px 0 0.2px rgba(255,255,255,0.5),1087px 1113px 0 0.2px rgba(255,255,255,0.5),162px 3190px 0 0.2px rgba(255,255,255,0.5),743px 1107px 0 0.2px rgba(255,255,255,0.5),530px 1729px 0 0.2px rgba(255,255,255,0.5),1059px 1662px 0 0.2px rgba(255,255,255,0.5),611px 2197px 0 0.2px rgba(255,255,255,0.5),2108px 2337px 0 0.2px rgba(255,255,255,0.5),2025px 2868px 0 0.2px rgba(255,255,255,0.5),1339px 366px 0 0.2px rgba(255,255,255,0.5),1143px 235px 0 0.2px rgba(255,255,255,0.5),750px 1742px 0 0.2px rgba(255,255,255,0.5),296px 1101px 0 0.2px rgba(255,255,255,0.5),68px 2598px 0 0.2px rgba(255,255,255,0.5),362px 1067px 0 0.2px rgba(255,255,255,0.5),343px 2491px 0 0.2px rgba(255,255,255,0.5),910px 272px 0 0.2px rgba(255,255,255,0.5),1083px 498px 0 0.2px rgba(255,255,255,0.5),1858px 47px 0 0.2px rgba(255,255,255,0.5),1389px 2265px 0 0.2px rgba(255,255,255,0.5),1711px 1097px 0 0.2px rgba(255,255,255,0.5),2546px 529px 0 0.2px rgba(255,255,255,0.5),176px 2158px 0 0.2px rgba(255,255,255,0.5),976px 448px 0 0.2px rgba(255,255,255,0.5),661px 1072px 0 0.2px rgba(255,255,255,0.5),206px 741px 0 0.2px rgba(255,255,255,0.5),826px 1277px 0 0.2px rgba(255,255,255,0.5),1249px 2175px 0 0.2px rgba(255,255,255,0.5),843px 1187px 0 0.2px rgba(255,255,255,0.5),1825px 2048px 0 0.2px rgba(255,255,255,0.5),728px 1108px 0 0.2px rgba(255,255,255,0.5),1421px 74px 0 0.2px rgba(255,255,255,0.5),1025px 151px 0 0.2px rgba(255,255,255,0.5),62px 75px 0 0.2px rgba(255,255,255,0.5),2071px 2257px 0 0.2px rgba(255,255,255,0.5),776px 2106px 0 0.2px rgba(255,255,255,0.5),1944px 1006px 0 0.2px rgba(255,255,255,0.5),1831px 435px 0 0.2px rgba(255,255,255,0.5),1770px 2689px 0 0.2px rgba(255,255,255,0.5),2027px 2236px 0 0.2px rgba(255,255,255,0.5),1610px 2075px 0 0.2px rgba(255,255,255,0.5),1260px 2816px 0 0.2px rgba(255,255,255,0.5),881px 940px 0 0.2px rgba(255,255,255,0.5),1403px 813px 0 0.2px rgba(255,255,255,0.5),572px 1657px 0 0.2px rgba(255,255,255,0.5),1423px 222px 0 0.2px rgba(255,255,255,0.5),531px 58px 0 0.2px rgba(255,255,255,0.5),289px 2561px 0 0.2px rgba(255,255,255,0.5),1046px 1764px 0 0.2px rgba(255,255,255,0.5),668px 226px 0 0.2px rgba(255,255,255,0.5),346px 2724px 0 0.2px rgba(255,255,255,0.5),1560px 2072px 0 0.2px rgba(255,255,255,0.5),1154px 2452px 0 0.2px rgba(255,255,255,0.5),992px 2837px 0 0.2px rgba(255,255,255,0.5),1200px 185px 0 0.2px rgba(255,255,255,0.5),1881px 759px 0 0.2px rgba(255,255,255,0.5),645px 1101px 0 0.2px rgba(255,255,255,0.5),1826px 14px 0 0.2px rgba(255,255,255,0.5),1078px 1491px 0 0.2px rgba(255,255,255,0.5),1347px 2240px 0 0.2px rgba(255,255,255,0.5),1325px 1001px 0 0.2px rgba(255,255,255,0.5),141px 1267px 0 0.2px rgba(255,255,255,0.5),892px 1460px 0 0.2px rgba(255,255,255,0.5),749px 4px 0 0.2px rgba(255,255,255,0.5),1373px 1563px 0 0.2px rgba(255,255,255,0.5),343px 1944px 0 0.2px rgba(255,255,255,0.5),1142px 2059px 0 0.2px rgba(255,255,255,0.5),823px 1016px 0 0.2px rgba(255,255,255,0.5),2067px 3179px 0 0.2px rgba(255,255,255,0.5),20px 372px 0 0.2px rgba(255,255,255,0.5),1082px 367px 0 0.2px rgba(255,255,255,0.5),589px 1636px 0 0.2px rgba(255,255,255,0.5),2403px 170px 0 0.2px rgba(255,255,255,0.5),1613px 92px 0 0.2px rgba(255,255,255,0.5),1227px 1246px 0 0.2px rgba(255,255,255,0.5),953px 346px 0 0.2px rgba(255,255,255,0.5),2398px 2167px 0 0.2px rgba(255,255,255,0.5),635px 2693px 0 0.2px rgba(255,255,255,0.5),2443px 1595px 0 0.2px rgba(255,255,255,0.5),1335px 2951px 0 0.2px rgba(255,255,255,0.5),2024px 612px 0 0.2px rgba(255,255,255,0.5),1163px 2966px 0 0.2px rgba(255,255,255,0.5),2534px 2634px 0 0.2px rgba(255,255,255,0.5),592px 179px 0 0.2px rgba(255,255,255,0.5),2101px 2569px 0 0.2px rgba(255,255,255,0.5),1758px 3005px 0 0.2px rgba(255,255,255,0.5),2070px 570px 0 0.2px rgba(255,255,255,0.5),2145px 3083px 0 0.2px rgba(255,255,255,0.5),2065px 2328px 0 0.2px rgba(255,255,255,0.5),65px 2811px 0 0.2px rgba(255,255,255,0.5),2392px 2913px 0 0.2px rgba(255,255,255,0.5),941px 348px 0 0.2px rgba(255,255,255,0.5),127px 171px 0 0.2px rgba(255,255,255,0.5),545px 2609px 0 0.2px rgba(255,255,255,0.5),1477px 429px 0 0.2px rgba(255,255,255,0.5),1542px 1848px 0 0.2px rgba(255,255,255,0.5),2287px 207px 0 0.2px rgba(255,255,255,0.5),77px 2565px 0 0.2px rgba(255,255,255,0.5),2176px 2788px 0 0.2px rgba(255,255,255,0.5),1001px 2004px 0 0.2px rgba(255,255,255,0.5),1080px 13px 0 0.2px rgba(255,255,255,0.5),1871px 287px 0 0.2px rgba(255,255,255,0.5),2060px 2192px 0 0.2px rgba(255,255,255,0.5),376px 2700px 0 0.2px rgba(255,255,255,0.5),2154px 270px 0 0.2px rgba(255,255,255,0.5),1940px 1032px 0 0.2px rgba(255,255,255,0.5),304px 1087px 0 0.2px rgba(255,255,255,0.5),961px 2987px 0 0.2px rgba(255,255,255,0.5),840px 945px 0 0.2px rgba(255,255,255,0.5),1885px 2023px 0 0.2px rgba(255,255,255,0.5),1566px 314px 0 0.2px rgba(255,255,255,0.5),1962px 2800px 0 0.2px rgba(255,255,255,0.5),1176px 3141px 0 0.2px rgba(255,255,255,0.5),191px 2527px 0 0.2px rgba(255,255,255,0.5),812px 317px 0 0.2px rgba(255,255,255,0.5),2456px 603px 0 0.2px rgba(255,255,255,0.5),1358px 1040px 0 0.2px rgba(255,255,255,0.5),1246px 2544px 0 0.2px rgba(255,255,255,0.5),2325px 546px 0 0.2px rgba(255,255,255,0.5),51px 1975px 0 0.2px rgba(255,255,255,0.5),248px 1989px 0 0.2px rgba(255,255,255,0.5),1100px 2752px 0 0.2px rgba(255,255,255,0.5),407px 2835px 0 0.2px rgba(255,255,255,0.5),891px 2767px 0 0.2px rgba(255,255,255,0.5),2005px 1191px 0 0.2px rgba(255,255,255,0.5),2115px 1169px 0 0.2px rgba(255,255,255,0.5),1903px 1908px 0 0.2px rgba(255,255,255,0.5),1910px 3142px 0 0.2px rgba(255,255,255,0.5),485px 2249px 0 0.2px rgba(255,255,255,0.5),816px 1276px 0 0.2px rgba(255,255,255,0.5),351px 1937px 0 0.2px rgba(255,255,255,0.5),71px 1186px 0 0.2px rgba(255,255,255,0.5),1879px 313px 0 0.2px rgba(255,255,255,0.5),2075px 1840px 0 0.2px rgba(255,255,255,0.5),1100px 1584px 0 0.2px rgba(255,255,255,0.5),859px 863px 0 0.2px rgba(255,255,255,0.5),305px 2381px 0 0.2px rgba(255,255,255,0.5),369px 580px 0 0.2px rgba(255,255,255,0.5),2146px 1072px 0 0.2px rgba(255,255,255,0.5),1472px 543px 0 0.2px rgba(255,255,255,0.5),2471px 2587px 0 0.2px rgba(255,255,255,0.5),2083px 1145px 0 0.2px rgba(255,255,255,0.5),461px 2880px 0 0.2px rgba(255,255,255,0.5),1495px 947px 0 0.2px rgba(255,255,255,0.5),2039px 1991px 0 0.2px rgba(255,255,255,0.5),1614px 101px 0 0.2px rgba(255,255,255,0.5),651px 14px 0 0.2px rgba(255,255,255,0.5),2013px 2791px 0 0.2px rgba(255,255,255,0.5),1846px 1660px 0 0.2px rgba(255,255,255,0.5),1236px 2978px 0 0.2px rgba(255,255,255,0.5),576px 1704px 0 0.2px rgba(255,255,255,0.5),1408px 1540px 0 0.2px rgba(255,255,255,0.5),1294px 495px 0 0.2px rgba(255,255,255,0.5),1357px 7px 0 0.2px rgba(255,255,255,0.5),1329px 3075px 0 0.2px rgba(255,255,255,0.5),1385px 1631px 0 0.2px rgba(255,255,255,0.5),491px 801px 0 0.2px rgba(255,255,255,0.5),48px 3030px 0 0.2px rgba(255,255,255,0.5),1187px 1037px 0 0.2px rgba(255,255,255,0.5),1524px 266px 0 0.2px rgba(255,255,255,0.5),1609px 1598px 0 0.2px rgba(255,255,255,0.5),2413px 312px 0 0.2px rgba(255,255,255,0.5),1477px 1753px 0 0.2px rgba(255,255,255,0.5),1127px 197px 0 0.2px rgba(255,255,255,0.5),1149px 416px 0 0.2px rgba(255,255,255,0.5),211px 2711px 0 0.2px rgba(255,255,255,0.5),1169px 2600px 0 0.2px rgba(255,255,255,0.5),609px 1021px 0 0.2px rgba(255,255,255,0.5),1088px 1786px 0 0.2px rgba(255,255,255,0.5),2092px 1292px 0 0.2px rgba(255,255,255,0.5),777px 3166px 0 0.2px rgba(255,255,255,0.5),1529px 1752px 0 0.2px rgba(255,255,255,0.5),118px 3119px 0 0.2px rgba(255,255,255,0.5),1638px 2269px 0 0.2px rgba(255,255,255,0.5),2249px 833px 0 0.2px rgba(255,255,255,0.5),330px 202px 0 0.2px rgba(255,255,255,0.5),1682px 1846px 0 0.2px rgba(255,255,255,0.5),2518px 3082px 0 0.2px rgba(255,255,255,0.5),567px 2639px 0 0.2px rgba(255,255,255,0.5),1172px 1988px 0 0.2px rgba(255,255,255,0.5),200px 2253px 0 0.2px rgba(255,255,255,0.5),521px 699px 0 0.2px rgba(255,255,255,0.5),1934px 1699px 0 0.2px rgba(255,255,255,0.5),1407px 1154px 0 0.2px rgba(255,255,255,0.5),1219px 1047px 0 0.2px rgba(255,255,255,0.5),1065px 1663px 0 0.2px rgba(255,255,255,0.5),977px 1232px 0 0.2px rgba(255,255,255,0.5),1979px 2282px 0 0.2px rgba(255,255,255,0.5),1615px 490px 0 0.2px rgba(255,255,255,0.5),685px 2634px 0 0.2px rgba(255,255,255,0.5),662px 307px 0 0.2px rgba(255,255,255,0.5),851px 2050px 0 0.2px rgba(255,255,255,0.5),2036px 2254px 0 0.2px rgba(255,255,255,0.5),901px 1855px 0 0.2px rgba(255,255,255,0.5),1363px 3109px 0 0.2px rgba(255,255,255,0.5),1843px 1750px 0 0.2px rgba(255,255,255,0.5),571px 2243px 0 0.2px rgba(255,255,255,0.5),788px 999px 0 0.2px rgba(255,255,255,0.5),371px 715px 0 0.2px rgba(255,255,255,0.5),1400px 2276px 0 0.2px rgba(255,255,255,0.5),373px 1307px 0 0.2px rgba(255,255,255,0.5),979px 1508px 0 0.2px rgba(255,255,255,0.5),1058px 2333px 0 0.2px rgba(255,255,255,0.5),827px 82px 0 0.2px rgba(255,255,255,0.5),1690px 1568px 0 0.2px rgba(255,255,255,0.5),1695px 3054px 0 0.2px rgba(255,255,255,0.5);  animation: star-twinkle 8s ease-in-out infinite; }
.sky-near { box-shadow: 2146px 860px 0 0.6px rgba(223,234,255,0.72),1543px 1106px 0 0.6px rgba(223,234,255,0.72),1385px 3080px 0 0.6px rgba(223,234,255,0.72),254px 2040px 0 0.6px rgba(223,234,255,0.72),1136px 2352px 0 0.6px rgba(223,234,255,0.72),1475px 515px 0 0.6px rgba(223,234,255,0.72),2061px 2167px 0 0.6px rgba(223,234,255,0.72),884px 379px 0 0.6px rgba(223,234,255,0.72),1110px 1017px 0 0.6px rgba(223,234,255,0.72),1575px 1637px 0 0.6px rgba(223,234,255,0.72),1826px 1768px 0 0.6px rgba(223,234,255,0.72),1278px 89px 0 0.6px rgba(223,234,255,0.72),521px 132px 0 0.6px rgba(223,234,255,0.72),1741px 2906px 0 0.6px rgba(223,234,255,0.72),1938px 2405px 0 0.6px rgba(223,234,255,0.72),2006px 0px 0 0.6px rgba(223,234,255,0.72),299px 1603px 0 0.6px rgba(223,234,255,0.72),2162px 1917px 0 0.6px rgba(223,234,255,0.72),1838px 1017px 0 0.6px rgba(223,234,255,0.72),446px 916px 0 0.6px rgba(223,234,255,0.72),632px 622px 0 0.6px rgba(223,234,255,0.72),2139px 2793px 0 0.6px rgba(223,234,255,0.72),446px 2956px 0 0.6px rgba(223,234,255,0.72),1873px 348px 0 0.6px rgba(223,234,255,0.72),2258px 3182px 0 0.6px rgba(223,234,255,0.72),161px 5px 0 0.6px rgba(223,234,255,0.72),514px 952px 0 0.6px rgba(223,234,255,0.72),2332px 153px 0 0.6px rgba(223,234,255,0.72),1244px 524px 0 0.6px rgba(223,234,255,0.72),1031px 2163px 0 0.6px rgba(223,234,255,0.72),1791px 2861px 0 0.6px rgba(223,234,255,0.72),459px 407px 0 0.6px rgba(223,234,255,0.72),288px 1230px 0 0.6px rgba(223,234,255,0.72),2148px 2387px 0 0.6px rgba(223,234,255,0.72),785px 1589px 0 0.6px rgba(223,234,255,0.72),1068px 915px 0 0.6px rgba(223,234,255,0.72),2461px 4px 0 0.6px rgba(223,234,255,0.72),42px 2201px 0 0.6px rgba(223,234,255,0.72),1235px 1886px 0 0.6px rgba(223,234,255,0.72),1141px 1295px 0 0.6px rgba(223,234,255,0.72),992px 1946px 0 0.6px rgba(223,234,255,0.72),2155px 961px 0 0.6px rgba(223,234,255,0.72),2240px 1011px 0 0.6px rgba(223,234,255,0.72),119px 1686px 0 0.6px rgba(223,234,255,0.72),1259px 226px 0 0.6px rgba(223,234,255,0.72),89px 795px 0 0.6px rgba(223,234,255,0.72),2041px 2762px 0 0.6px rgba(223,234,255,0.72),1720px 332px 0 0.6px rgba(223,234,255,0.72),1053px 933px 0 0.6px rgba(223,234,255,0.72),1738px 1516px 0 0.6px rgba(223,234,255,0.72),928px 2019px 0 0.6px rgba(223,234,255,0.72),139px 2850px 0 0.6px rgba(223,234,255,0.72),1384px 2942px 0 0.6px rgba(223,234,255,0.72),1722px 1484px 0 0.6px rgba(223,234,255,0.72),1623px 811px 0 0.6px rgba(223,234,255,0.72),27px 1196px 0 0.6px rgba(223,234,255,0.72),2067px 276px 0 0.6px rgba(223,234,255,0.72),840px 2030px 0 0.6px rgba(223,234,255,0.72),820px 1276px 0 0.6px rgba(223,234,255,0.72),794px 945px 0 0.6px rgba(223,234,255,0.72),1905px 907px 0 0.6px rgba(223,234,255,0.72),1085px 3114px 0 0.6px rgba(223,234,255,0.72),1208px 446px 0 0.6px rgba(223,234,255,0.72),2554px 2030px 0 0.6px rgba(223,234,255,0.72),2498px 767px 0 0.6px rgba(223,234,255,0.72),914px 1986px 0 0.6px rgba(223,234,255,0.72),1708px 2725px 0 0.6px rgba(223,234,255,0.72),231px 2436px 0 0.6px rgba(223,234,255,0.72),599px 1611px 0 0.6px rgba(223,234,255,0.72),222px 872px 0 0.6px rgba(223,234,255,0.72),96px 2441px 0 0.6px rgba(223,234,255,0.72),581px 1701px 0 0.6px rgba(223,234,255,0.72),212px 2907px 0 0.6px rgba(223,234,255,0.72),246px 754px 0 0.6px rgba(223,234,255,0.72),1611px 1841px 0 0.6px rgba(223,234,255,0.72),1286px 3001px 0 0.6px rgba(223,234,255,0.72),463px 325px 0 0.6px rgba(223,234,255,0.72),678px 1348px 0 0.6px rgba(223,234,255,0.72),781px 759px 0 0.6px rgba(223,234,255,0.72),2149px 3056px 0 0.6px rgba(223,234,255,0.72),1915px 130px 0 0.6px rgba(223,234,255,0.72),1277px 2721px 0 0.6px rgba(223,234,255,0.72),1550px 1531px 0 0.6px rgba(223,234,255,0.72),1358px 1812px 0 0.6px rgba(223,234,255,0.72),693px 446px 0 0.6px rgba(223,234,255,0.72),11px 320px 0 0.6px rgba(223,234,255,0.72),1146px 330px 0 0.6px rgba(223,234,255,0.72),1439px 1721px 0 0.6px rgba(223,234,255,0.72),506px 2298px 0 0.6px rgba(223,234,255,0.72),849px 1557px 0 0.6px rgba(223,234,255,0.72),1460px 3148px 0 0.6px rgba(223,234,255,0.72),1264px 1771px 0 0.6px rgba(223,234,255,0.72),359px 201px 0 0.6px rgba(223,234,255,0.72),1939px 801px 0 0.6px rgba(223,234,255,0.72),1526px 2218px 0 0.6px rgba(223,234,255,0.72),1828px 790px 0 0.6px rgba(223,234,255,0.72),1324px 1491px 0 0.6px rgba(223,234,255,0.72),1943px 124px 0 0.6px rgba(223,234,255,0.72),1682px 1015px 0 0.6px rgba(223,234,255,0.72),1657px 166px 0 0.6px rgba(223,234,255,0.72),1538px 142px 0 0.6px rgba(223,234,255,0.72),1900px 256px 0 0.6px rgba(223,234,255,0.72),253px 1052px 0 0.6px rgba(223,234,255,0.72),798px 3060px 0 0.6px rgba(223,234,255,0.72),257px 2480px 0 0.6px rgba(223,234,255,0.72),1388px 1486px 0 0.6px rgba(223,234,255,0.72),1115px 1372px 0 0.6px rgba(223,234,255,0.72),2527px 178px 0 0.6px rgba(223,234,255,0.72),1073px 3057px 0 0.6px rgba(223,234,255,0.72),1296px 1128px 0 0.6px rgba(223,234,255,0.72),1218px 15px 0 0.6px rgba(223,234,255,0.72),2439px 2596px 0 0.6px rgba(223,234,255,0.72),267px 99px 0 0.6px rgba(223,234,255,0.72),957px 439px 0 0.6px rgba(223,234,255,0.72),1946px 2930px 0 0.6px rgba(223,234,255,0.72),1907px 3179px 0 0.6px rgba(223,234,255,0.72),1583px 1028px 0 0.6px rgba(223,234,255,0.72),1761px 2021px 0 0.6px rgba(223,234,255,0.72),543px 2033px 0 0.6px rgba(223,234,255,0.72),749px 35px 0 0.6px rgba(223,234,255,0.72),1242px 2834px 0 0.6px rgba(223,234,255,0.72),619px 2487px 0 0.6px rgba(223,234,255,0.72),967px 1342px 0 0.6px rgba(223,234,255,0.72),1308px 1887px 0 0.6px rgba(223,234,255,0.72),1482px 2440px 0 0.6px rgba(223,234,255,0.72),323px 2096px 0 0.6px rgba(223,234,255,0.72),808px 1604px 0 0.6px rgba(223,234,255,0.72),655px 1012px 0 0.6px rgba(223,234,255,0.72),1670px 265px 0 0.6px rgba(223,234,255,0.72),138px 1973px 0 0.6px rgba(223,234,255,0.72),2263px 2230px 0 0.6px rgba(223,234,255,0.72),1334px 658px 0 0.6px rgba(223,234,255,0.72),1747px 430px 0 0.6px rgba(223,234,255,0.72),295px 1084px 0 0.6px rgba(223,234,255,0.72),2558px 344px 0 0.6px rgba(223,234,255,0.72),853px 394px 0 0.6px rgba(223,234,255,0.72),1724px 2041px 0 0.6px rgba(223,234,255,0.72),1830px 709px 0 0.6px rgba(223,234,255,0.72),959px 544px 0 0.6px rgba(223,234,255,0.72),1707px 1887px 0 0.6px rgba(223,234,255,0.72),2540px 2761px 0 0.6px rgba(223,234,255,0.72),962px 3063px 0 0.6px rgba(223,234,255,0.72),2205px 3169px 0 0.6px rgba(223,234,255,0.72),496px 3193px 0 0.6px rgba(223,234,255,0.72),1203px 1203px 0 0.6px rgba(223,234,255,0.72),1144px 2321px 0 0.6px rgba(223,234,255,0.72),1096px 1527px 0 0.6px rgba(223,234,255,0.72),1040px 3023px 0 0.6px rgba(223,234,255,0.72),1066px 815px 0 0.6px rgba(223,234,255,0.72),1799px 1013px 0 0.6px rgba(223,234,255,0.72),760px 1004px 0 0.6px rgba(223,234,255,0.72),964px 628px 0 0.6px rgba(223,234,255,0.72),1152px 2368px 0 0.6px rgba(223,234,255,0.72),771px 1336px 0 0.6px rgba(223,234,255,0.72),265px 1622px 0 0.6px rgba(223,234,255,0.72),1030px 1007px 0 0.6px rgba(223,234,255,0.72),2078px 2155px 0 0.6px rgba(223,234,255,0.72),947px 2660px 0 0.6px rgba(223,234,255,0.72),411px 2676px 0 0.6px rgba(223,234,255,0.72),1900px 151px 0 0.6px rgba(223,234,255,0.72),419px 18px 0 0.6px rgba(223,234,255,0.72),1944px 946px 0 0.6px rgba(223,234,255,0.72),1836px 1531px 0 0.6px rgba(223,234,255,0.72),165px 1202px 0 0.6px rgba(223,234,255,0.72),953px 488px 0 0.6px rgba(223,234,255,0.72),206px 776px 0 0.6px rgba(223,234,255,0.72),2459px 2388px 0 0.6px rgba(223,234,255,0.72),795px 307px 0 0.6px rgba(223,234,255,0.72),1524px 2099px 0 0.6px rgba(223,234,255,0.72),728px 1839px 0 0.6px rgba(223,234,255,0.72),2470px 1064px 0 0.6px rgba(223,234,255,0.72),25px 433px 0 0.6px rgba(223,234,255,0.72),2441px 2906px 0 0.6px rgba(223,234,255,0.72),2539px 1432px 0 0.6px rgba(223,234,255,0.72),891px 153px 0 0.6px rgba(223,234,255,0.72),1510px 1392px 0 0.6px rgba(223,234,255,0.72),579px 180px 0 0.6px rgba(223,234,255,0.72),835px 1044px 0 0.6px rgba(223,234,255,0.72),156px 2455px 0 0.6px rgba(223,234,255,0.72),833px 46px 0 0.6px rgba(223,234,255,0.72),1340px 1675px 0 0.6px rgba(223,234,255,0.72),1522px 758px 0 0.6px rgba(223,234,255,0.72),2543px 1278px 0 0.6px rgba(223,234,255,0.72),319px 833px 0 0.6px rgba(223,234,255,0.72),128px 2030px 0 0.6px rgba(223,234,255,0.72); animation: star-twinkle 11s ease-in-out infinite 2.5s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.95; }
}

.shooting-star {
  position: absolute; width: 130px; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,0.75) 100%);
  border-radius: 2px; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));
  will-change: transform, opacity;
}
.ss1 { top: 9%;  left: 12%; animation: shoot 12s ease-in 3s  infinite; }
.ss2 { top: 5%;  left: 48%; animation: shoot 16s ease-in 8s  infinite; }
.ss3 { top: 20%; left: 28%; animation: shoot 19s ease-in 14s infinite; }

@keyframes shoot {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(20deg); }
  3%   { opacity: 0.8; }
  14%  { opacity: 0; transform: translate3d(44vw, 22vh, 0) rotate(20deg); }
  100% { opacity: 0; transform: translate3d(44vw, 22vh, 0) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sky-far, .sky-near { animation: none; opacity: 0.7; transform: none !important; }
  .shooting-star { display: none; }
}