/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Base ───────────────────────────────────────────────── */
html {
  /* Prevent iOS font size inflation on landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh; /* dvh accounts for mobile browser chrome */
  background: linear-gradient(135deg, #c94a00, #e8650a, #f5831e, #ff9a3c, #e8650a, #c94a00);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
  overflow: hidden;
  /* Cursor hidden only for pointer devices – handled below */
}

/* ─── Noise overlay ──────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
  z-index: 1;
}

/* ─── Custom cursor (pointer devices only) ───────────────── */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }

  .cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    mix-blend-mode: overlay;
    will-change: left, top;
  }

  .cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;
    will-change: left, top;
  }
}

/* Hide cursor elements on touch/non-pointer devices */
@media not all and (hover: hover) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}

/* ─── Background blobs ───────────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(clamp(60px, 10vw, 110px));
  pointer-events: none;
  animation: floatBlob 12s ease-in-out infinite;
  z-index: 0;
}

.blob-1 {
  width: clamp(280px, 55vw, 600px);
  height: clamp(280px, 55vw, 600px);
  background: rgba(255, 120, 0, 0.25);
  top: -20%;
  left: -15%;
  animation-delay: 0s;
}

.blob-2 {
  width: clamp(220px, 45vw, 500px);
  height: clamp(220px, 45vw, 500px);
  background: rgba(180, 40, 0, 0.3);
  bottom: -15%;
  right: -12%;
  animation-delay: -5s;
}

.blob-3 {
  width: clamp(150px, 30vw, 320px);
  height: clamp(150px, 30vw, 320px);
  background: rgba(255, 200, 80, 0.1);
  /* Centre without interfering with the animation transform */
  top: 50%;
  left: 50%;
  margin-top: calc(clamp(150px, 30vw, 320px) / -2);
  margin-left: calc(clamp(150px, 30vw, 320px) / -2);
  animation-delay: -2.5s;
}

/* ─── Content ────────────────────────────────────────────── */
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: 1.5rem;
  text-align: center;
}

/* ─── Title ──────────────────────────────────────────────── */
.title {
  font-size: clamp(3.5rem, 15vw, 10rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(160deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeSlideIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  user-select: none;
}

/* ─── Divider ────────────────────────────────────────────── */
.divider {
  width: clamp(28px, 5vw, 40px);
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  animation: fadeSlideIn 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Subtitle ───────────────────────────────────────────── */
.subtitle {
  /* Reliable readable floor on all screens */
  font-size: clamp(0.625rem, 1.8vw, 0.8rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  animation: fadeSlideIn 1s 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -28px) scale(1.04); }
  66%       { transform: translate(-14px, 18px) scale(0.97); }
}

/* ─── Contact ────────────────────────────────────────────── */
.contact {
  position: fixed;
  bottom: clamp(1.25rem, 4vw, 2rem);
  left: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  animation: fadeSlideIn 1s 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.contact-label {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.contact-list {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.contact-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
  white-space: nowrap;
}

.contact-item:hover {
  color: rgba(255, 255, 255, 0.9);
}

.contact-name {
  font-size: clamp(0.65rem, 1.5vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-email {
  font-size: clamp(0.65rem, 1.5vw, 0.72rem);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body,
  .blob,
  .title,
  .divider,
  .subtitle,
  .contact {
    animation: none !important;
    transition: none !important;
  }

  .title {
    opacity: 1;
    transform: none;
  }

  .divider,
  .subtitle {
    opacity: 1;
    transform: none;
  }
}