/* aminul.co.uk
   A starry night sky turns slowly behind a still silhouette, under a dark overlay, with the
   name in Road Rage, the site name in purple Poppins, a Contact button and social links. */

/* ─── Fonts (self-hosted). Poppins: SIL Open Font Licence. Road Rage (the name): Youssef Habchi,
   free for personal use only; commercial use needs a licence from youssef-habchi.com ─── */
@font-face { font-family: "Road Rage"; font-weight: 400; font-display: block; src: url("../fonts/road-rage.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: block; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  --bg: #151515;
  --shade: #111111;
  --purple: #7B4AE2;
  --white: #FFFFFF;
  --line: rgba(255, 255, 255, 0.3);
  --quiet: rgba(255, 255, 255, 0.6);
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-name: "Road Rage", "Arial Black", "Segoe UI", system-ui, sans-serif;
}

/* ─── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--white);
  font: 400 1rem/1.5 var(--font);
  overflow-x: hidden;
}
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ─── Background: turning sky, still foreground, dark overlay ─── */
.scene { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: var(--bg); }

/* The sky is a square centred on the photo's horizon, just big enough to fill the screen at any angle.
   It turns once every 10 minutes, like a time-lapse of the night sky. */
.sky {
  --d: 240vmax;
  position: absolute; left: 50%;
  top: 86%; top: min(86%, calc(100% - 9.333vw));   /* the horizon point of the foreground photo */
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background: #000 url("../img/sky.jpg") center / cover no-repeat;
  background-image: image-set(url("../img/sky.webp") type("image/webp"), url("../img/sky.jpg") type("image/jpeg"));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform;
  animation: sky-turn 600s linear infinite, fade-in 2.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@supports (width: hypot(1px, 1px)) {
  .sky { --d: calc(2 * hypot(50vw, 86vh)); }
}
@keyframes sky-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.foreground {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: url("../img/foreground.png") center bottom / cover no-repeat;
  background-image: image-set(url("../img/foreground.webp") type("image/webp"), url("../img/foreground.png") type("image/png"));
  animation: fade-in 2.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Northern lights: a still layer over the turning sky, behind the hillside, so stars drift through it.
   The dark overlay (.shade) carries a faint wash of aurora colour (green near the horizon, teal, then
   violet higher up); .aurora draws glowing ribbons and faint rays with CSS gradients, and slowly drifts and breathes. It uses plain transparency and only slides and fades, which keeps it smooth. */
.aurora {
  position: absolute; top: 30%; bottom: -4%; left: -8%; right: -8%;
  background:
    /* main ribbon: a long sweep of green low in the sky, rising slightly to the right */
    radial-gradient(34% 10% at 30% 66%, rgba(60, 255, 165, 0.95), rgba(60, 255, 165, 0) 75%),
    radial-gradient(30% 9% at 58% 61%, rgba(55, 250, 175, 0.85), rgba(55, 250, 175, 0) 75%),
    radial-gradient(24% 8% at 82% 55%, rgba(50, 245, 190, 0.75), rgba(50, 245, 190, 0) 75%),
    /* glow beneath it, fading into the horizon */
    radial-gradient(55% 22% at 50% 82%, rgba(40, 230, 140, 0.55), rgba(40, 230, 140, 0) 70%),
    /* a fainter teal-to-violet ribbon higher up */
    radial-gradient(44% 8% at 55% 40%, rgba(70, 210, 230, 0.5), rgba(70, 210, 230, 0) 75%),
    radial-gradient(36% 12% at 38% 30%, rgba(165, 105, 255, 0.45), rgba(165, 105, 255, 0) 72%);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform, opacity;
  animation: fade-in 3s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both, aurora-drift 48s ease-in-out infinite alternate, aurora-breathe 11s ease-in-out infinite alternate;
}
/* faint vertical rays, uneven like real curtains, only inside the glow. They're part of the same
   layer and move with it, so they cost nothing extra. */
.aurora::before, .aurora::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-mask-image: radial-gradient(50% 32% at 50% 66%, #000 25%, transparent 80%);
          mask-image: radial-gradient(50% 32% at 50% 66%, #000 25%, transparent 80%);
}
.aurora::before { background: repeating-linear-gradient(90deg, rgba(130, 255, 205, 0) 0 1.3%, rgba(130, 255, 205, 0.32) 1.9% 2.2%, rgba(130, 255, 205, 0) 2.9% 3.7%); }
.aurora::after { background: repeating-linear-gradient(90deg, rgba(150, 255, 215, 0) 0 2.6%, rgba(150, 255, 215, 0.22) 3.4% 3.9%, rgba(150, 255, 215, 0) 4.8% 6.1%); }
@keyframes aurora-drift { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(4%, -2%, 0); } }
@keyframes aurora-breathe { from { opacity: 0.75; } to { opacity: 1; } }
.shade {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.8;
  /* the theme's dark overlay, with the aurora's colours mixed faintly into it */
  background: linear-gradient(to top, #0B1E15 0%, #0C1D18 26%, #0C1A1E 48%, #15122A 72%, var(--shade) 96%);
}

/* ─── Centre: site name, name, Contact button ─────────────── */
.intro {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem 1.5rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.site-name {
  margin: 0; color: var(--purple);
  font-weight: 700; font-size: clamp(1rem, 3.2vw, 1.44rem); line-height: 1.565;
  letter-spacing: 0.19rem; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.name {
  margin: 0.3em 0 0.45em; color: var(--white);   /* room for the brush strokes above and below the letters */
  font-family: var(--font-name); font-weight: 400; line-height: 1.05;
  font-size: clamp(2.25rem, 11.5vw, 5.5rem);
  text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.75rem; padding: 0 2.6rem;
  border: 3px solid var(--line); border-radius: 0;
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: 0.81rem; letter-spacing: 0.16rem; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease;
}
.button:hover, .button:focus-visible { border-color: var(--purple); }

/* ─── Social links ────────────────────────────────────────── */
.social { padding: 0 1.25rem 2.25rem; }
.social ul { display: flex; justify-content: center; gap: 0.5rem 2.5rem; }
.social a {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  color: var(--white); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}
.social a:hover, .social a:focus-visible { color: var(--purple); }
.social svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.social svg.icon-x { width: 2.1rem; height: 2.1rem; }

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  text-align: center; padding: 0 1.25rem 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.footer p { margin: 0; color: var(--quiet); font-size: 0.8rem; letter-spacing: 0.04em; }

/* ─── Load sequence: background, name, button, social links, footer ───
   Each element fades in on one gentle curve while gliding into place on a
   longer, softer one, with the stages overlapping. Only opacity, transform and clip-path are
   animated, which browsers run smoothly on the graphics chip. */
:root { --fade: cubic-bezier(0.4, 0, 0.2, 1); --glide: cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes fade-in { from { opacity: 0; } }
/* The name starts at 1% rather than 0% opacity: it looks the same, but lets browsers count it as the
   page's main content (Largest Contentful Paint), which search engines measure. */
@keyframes fade-in-name { from { opacity: 0.01; } }
@keyframes glide { from { transform: translate3d(0, 8px, 0); } }
@keyframes glide-name { from { transform: translate3d(0, 12px, 0); } }
/* The button and footer rise out of an invisible mask instead of fading, so their text is always at full contrast */
@keyframes rise-reveal { from { clip-path: inset(100% 0 0 0); transform: translate3d(0, 10px, 0); } to { clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); } }
@keyframes reveal-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.site-name, .name, .button, .social li { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.site-name { animation: fade-in 1.8s var(--fade) 0.8s both, glide 2.6s var(--glide) 0.8s both; }
.name { animation: fade-in-name 1.8s var(--fade) 0.95s both, glide-name 2.6s var(--glide) 0.95s both; }
.button { animation: rise-reveal 2s var(--glide) 1.8s both; }
.social li { animation-name: fade-in, glide; animation-duration: 1.6s, 2.4s; animation-timing-function: var(--fade), var(--glide); animation-fill-mode: both; }
.social li:nth-child(1) { animation-delay: 2.8s; }
.social li:nth-child(2) { animation-delay: 2.95s; }
.social li:nth-child(3) { animation-delay: 3.1s; }
.footer { animation: reveal-up 1.8s var(--glide) 4.1s both; }

/* ─── Small and short screens ─────────────────────────────── */
@media (max-width: 480px) {
  .social ul { gap: 0.5rem 1.75rem; }
  .button { padding: 0 2.2rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .intro { padding-top: 1.25rem; padding-bottom: 0.5rem; }
  .name { font-size: clamp(2.25rem, min(14vh, 11.5vw), 5rem); }
  .button { min-height: 3.1rem; }
  .social { padding-bottom: 1rem; }
  .social a { width: 2.6rem; height: 2.6rem; }
  .social svg { width: 1.6rem; height: 1.6rem; }
  .social svg.icon-x { width: 1.75rem; height: 1.75rem; }
}

/* ─── Visitors who prefer less motion: everything appears at once, nothing moves ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── Printing ────────────────────────────────────────────── */
@media print {
  .scene, .social, .button { display: none; }
  body { background: #FFF; color: #000; }
  .name { color: #000; text-shadow: none; }
}