/* diego leras :: coming soon */

:root{
  --bg:#07070a;
  --ink:#f4f2ee;
  --muted:rgba(244,242,238,.62);
  --edge:rgba(244,242,238,.16);
  --font:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
}

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

html,body{ height:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(20px,6vw,64px);
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ---- the photo, full bleed and blurred ---- */
.bg{
  position:fixed;
  /* bled past the viewport so the blur has no soft edge, without zooming the shot */
  inset:-44px;
  z-index:0;
  background:url("diego.jpg?v=2") center center / cover no-repeat;
  filter:blur(6px) saturate(1.15) brightness(1.02);
  animation:drift 32s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes drift{
  from{ transform:scale(1) translate3d(-.6%,-.5%,0); }
  to  { transform:scale(1.05) translate3d(.6%,.5%,0); }
}

/* ---- darkening so the type always reads ---- */
.scrim{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(7,7,10,.14) 0%,
      rgba(7,7,10,.34) 60%,
      rgba(7,7,10,.66) 100%),
    linear-gradient(to bottom,
      rgba(7,7,10,.26) 0%,
      rgba(7,7,10,.06) 45%,
      rgba(7,7,10,.36) 100%);
}

/* ---- fine film grain ---- */
.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---- centered type ---- */
.copy{
  position:relative;
  z-index:3;
  text-align:center;
  animation:rise 1.6s cubic-bezier(.16,1,.3,1) both;
}

/* same treatment as the caption below it, just bold and white */
h1{
  font-size:clamp(1.5rem,6.4vw,3.9rem);
  font-weight:700;
  letter-spacing:.2em;
  /* the tracking adds space after the last letter, this recenters it */
  text-indent:.2em;
  text-transform:uppercase;
  line-height:1.05;
  color:var(--ink);
  text-shadow:
    0 2px 30px rgba(0,0,0,.55),
    0 0 90px rgba(0,0,0,.4);
}

.soon{
  margin-top:clamp(16px,2.6vw,24px);
  font-size:clamp(.72rem,2.2vw,.92rem);
  font-weight:300;
  letter-spacing:.42em;
  /* the tracking adds space after the last letter, this recenters it */
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--muted);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

.handle{
  margin-top:clamp(10px,1.6vw,14px);
  font-size:clamp(.66rem,1.9vw,.8rem);
  font-weight:300;
  letter-spacing:.22em;
  text-indent:.22em;
  color:rgba(244,242,238,.55);
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}

.handle a{
  color:inherit;
  text-decoration:none;
  /* generous tap target on phones without moving the text */
  padding:6px 4px;
  margin:-6px -4px;
  transition:color .25s ease;
}

.handle a:hover,
.handle a:focus-visible{
  color:var(--ink);
}

.handle a:focus-visible{
  outline:1px solid rgba(244,242,238,.5);
  outline-offset:4px;
  border-radius:3px;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(22px); filter:blur(12px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* portrait crops the shot much tighter, so ease off the blur
   to stop the upscaled pixels turning to mush */
@media (max-width:700px){
  .bg{
    inset:-24px;
    filter:blur(5px) saturate(1.15) brightness(1);
  }
}

@media (max-width:560px){
  .soon{ letter-spacing:.3em; text-indent:.3em; }
}

/* the photo is decorative background, this keeps it described for screen readers */
.a11y-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}