/*
Theme Name: Dylan Mekhi Coming Soon
Theme URI: https://dylanmekhi.com
Author: Dylan Mekhi
Description: Minimal couture coming-soon theme for Dylan Mekhi.
Version: 1.0.0
Text Domain: dylan-mekhi
*/

:root {
  --paper: #fff;
  --ink: #171515;
  --muted: rgba(23, 21, 21, 0.56);
  --hairline: rgba(23, 21, 21, 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 280px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(1.25rem, 3.6vw, 3.75rem);
}

.screen::before {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.18;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(15, 12, 12, 0.055) 3px,
      transparent 4px
    );
  background-size: 100% 4px;
  mix-blend-mode: multiply;
  animation: scan-jitter 220ms steps(2, end) infinite;
}

.screen::after {
  position: absolute;
  z-index: 6;
  top: -18%;
  left: 0;
  width: 100%;
  height: 13%;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.16) 32%,
    rgba(15, 12, 12, 0.08) 49%,
    transparent 58%
  );
  animation: tracking-roll 8.8s linear infinite;
}

.noise {
  position: absolute;
  z-index: 4;
  inset: -35%;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  transform: translate3d(0, 0, 0);
  animation: noise-shift 280ms steps(2, end) infinite;
}

.topline,
.bottomline {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.69rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-mark {
  display: block;
  width: clamp(1.35rem, 1.7vw, 1.7rem);
  height: auto;
  color: var(--ink);
}

.header-contacts {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  white-space: nowrap;
}

.header-note {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}

.studio-year {
  grid-column: 2;
  justify-self: center;
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
}

.lockup {
  width: min(100%, 92rem);
  text-align: center;
  transform: translateY(-0.5vh);
  animation: signal-breathe 7s ease-in-out infinite;
}

.wordmark-art {
  position: relative;
  width: min(76vw, 62rem);
  aspect-ratio: 2255 / 139;
  margin: 0 auto;
  overflow: hidden;
}

.wordmark-art img {
  position: absolute;
  display: block;
  top: -166.2%;
  left: -6.61%;
  width: 113.082%;
  max-width: none;
  height: auto;
}

.wordmark-base {
  z-index: 1;
}

.studio .lockup-mark {
  display: block;
  width: clamp(3.79rem, 5.79vw, 5.51rem);
  height: auto;
  margin: 0 auto clamp(1rem, 1.8vw, 1.6rem);
  animation: mark-slip 12s steps(1, end) infinite;
}

.studio .wordmark-art {
  width: min(48.64vw, 39.68rem);
}

.wordmark-flash {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
}

.wordmark-flash-red {
  filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(5400%) hue-rotate(344deg) brightness(106%) contrast(108%);
  animation: logo-flash-red 6.4s steps(1, end) infinite;
}

.wordmark-flash-blue {
  filter: brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(2600%) hue-rotate(164deg) brightness(103%) contrast(105%);
  animation: logo-flash-blue 6.4s steps(1, end) infinite;
}

.hero-note {
  margin: clamp(1.15rem, 2.2vw, 2rem) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.54rem, 0.67vw, 0.68rem);
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.studio .hero-note {
  margin-top: clamp(1.8rem, 3.3vw, 3rem);
}

.coming-soon {
  margin: clamp(1.05rem, 1.8vw, 1.55rem) 0 0;
  padding-left: 0.24em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.studio .coming-soon {
  font-size: clamp(calc(0.54rem + 2px), calc(0.67vw + 2px), calc(0.68rem + 2px));
  font-weight: 700;
}

.social-link {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.2rem 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.53rem, 0.66vw, 0.65rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}

.social-link::after {
  position: absolute;
  right: 0.18em;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 280ms ease;
}

.social-link:hover::after,
.social-link:focus-visible::after {
  transform: scaleX(1);
}

.social-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.38rem;
}

.bottomline {
  align-items: end;
}

.footer-contacts {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  white-space: nowrap;
}

.bottomline .year {
  grid-column: 1;
}

.bottomline .status {
  grid-column: 2;
  letter-spacing: 0.2em;
}

/* Option 02: the warmer, tighter archival composition. */
.archive {
  --paper: #e7e4dc;
  --ink: #181616;
  --muted: rgba(24, 22, 22, 0.58);
}

.archive .screen {
  padding: clamp(1.25rem, 3vw, 3rem);
}

.archive .topline {
  grid-template-columns: 1fr auto 1fr;
}

.archive .topline .brand-mark {
  width: clamp(1.15rem, 1.5vw, 1.5rem);
}

.archive-year {
  grid-column: 3;
  justify-self: end;
}

.archive .archive-lockup {
  width: min(92vw, 38rem);
  transform: translateY(1vh);
}

.archive .wordmark-art {
  width: min(72vw, 29rem);
}

.archive-details {
  margin-top: clamp(1.1rem, 2.2vw, 1.9rem);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.55rem, 0.67vw, 0.67rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.archive-details p {
  margin: 0;
}

.archive .coming-soon {
  margin-top: clamp(1.25rem, 2.25vw, 1.9rem);
  font-size: clamp(0.95rem, 1.35vw, 1.25rem);
}

.archive .bottomline {
  grid-template-columns: 1fr auto 1fr;
}

.archive .bottomline .archive-cities {
  grid-column: 2;
  word-spacing: 1.25em;
}

/* Option 03: warmer and quieter, with the mark leading the lockup. */
.atelier {
  --paper: #e7e4dc;
  --ink: #171515;
}

.atelier .screen::before {
  opacity: 0.07;
  animation-duration: 600ms;
}

.atelier .screen::after {
  display: none;
}

.atelier .noise {
  opacity: 0.035;
  animation-duration: 700ms;
}

.atelier .topline {
  grid-template-columns: 1fr 1fr;
  padding-right: clamp(1rem, 2vw, 2.5rem);
}

.atelier .header-contacts {
  grid-column: 2;
  justify-self: end;
}

.atelier .atelier-lockup {
  width: min(95vw, 76rem);
  animation: atelier-drift 10s ease-in-out infinite;
}

.atelier .lockup-mark {
  display: block;
  width: clamp(2.75rem, 4.2vw, 4rem);
  height: auto;
  margin: 0 auto clamp(1.75rem, 3.2vw, 3rem);
  animation: mark-slip 12s steps(1, end) infinite;
}

.atelier .wordmark-art {
  width: min(68vw, 42rem);
}

.atelier .hero-note {
  color: var(--ink);
  font-size: clamp(0.55rem, 0.68vw, 0.67rem);
  letter-spacing: 0.22em;
}

.atelier .coming-soon {
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
}

@keyframes atelier-drift {
  0%, 100% { transform: translate3d(0, -0.25vh, 0); }
  50% { transform: translate3d(0, 0.1vh, 0); }
}

@keyframes scan-jitter {
  0% { transform: translateY(0); }
  50% { transform: translateY(1px); }
  100% { transform: translateY(-1px); }
}

@keyframes noise-shift {
  0% { transform: translate3d(-3%, 2%, 0); }
  25% { transform: translate3d(2%, -4%, 0); }
  50% { transform: translate3d(5%, 3%, 0); }
  75% { transform: translate3d(-2%, -1%, 0); }
  100% { transform: translate3d(1%, 4%, 0); }
}

@keyframes tracking-roll {
  0%, 68% { top: -18%; opacity: 0; }
  70% { opacity: 0.7; }
  82% { top: 110%; opacity: 0.25; }
  83%, 100% { top: 110%; opacity: 0; }
}

@keyframes signal-breathe {
  0%, 46%, 100% { transform: translate3d(0, -0.5vh, 0); }
  47% { transform: translate3d(-0.5px, -0.4vh, 0); }
  48% { transform: translate3d(0.75px, -0.6vh, 0); }
  49% { transform: translate3d(0, -0.5vh, 0); }
}

@keyframes logo-flash-red {
  0%, 42%, 44%, 72%, 74%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0);
  }
  42.2% {
    opacity: 0.7;
    transform: translateX(-3px);
    clip-path: inset(14% 0 64% 0);
  }
  43% {
    opacity: 0.45;
    transform: translateX(2px);
    clip-path: inset(56% 0 21% 0);
  }
  72.2% {
    opacity: 0.55;
    transform: translateX(-2px);
    clip-path: inset(36% 0 40% 0);
  }
}

@keyframes logo-flash-blue {
  0%, 42%, 44%, 72%, 74%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0);
  }
  42.2% {
    opacity: 0.55;
    transform: translateX(3px);
    clip-path: inset(62% 0 16% 0);
  }
  43.3% {
    opacity: 0.4;
    transform: translateX(-2px);
    clip-path: inset(25% 0 50% 0);
  }
  72.4% {
    opacity: 0.5;
    transform: translateX(2px);
    clip-path: inset(12% 0 67% 0);
  }
}

@keyframes mark-slip {
  0%, 63%, 65%, 100% { transform: translateX(0); filter: none; }
  63.2% { transform: translateX(-2px); filter: drop-shadow(3px 0 rgba(0, 170, 255, 0.4)); }
  64% { transform: translateX(1px); filter: drop-shadow(-2px 0 rgba(255, 23, 68, 0.4)); }
}

@media (max-width: 640px) {
  .screen {
    padding: 1.15rem;
  }

  .topline {
    grid-template-columns: 1fr auto 1fr;
  }

  .header-contacts {
    gap: 0.8rem;
  }

  .header-note {
    font-size: 0.44rem;
    letter-spacing: 0.1em;
  }

  .hero-note {
    margin-top: 1.15rem;
    font-size: 0.5rem;
  }

  .coming-soon {
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  .studio .coming-soon {
    font-size: 0.5rem;
  }

  .social-link {
    font-size: 0.5rem;
  }

  .bottomline .status {
    justify-self: center;
  }

  .archive-details {
    font-size: 0.52rem;
  }

  .archive .bottomline .archive-cities {
    font-size: 0.51rem;
    word-spacing: 0.45em;
  }

  .atelier .lockup-mark {
    width: 2.75rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .screen {
    padding-block: 0.85rem;
  }

  .studio .lockup-mark,
  .atelier .lockup-mark {
    width: 2rem;
    margin-bottom: 0.85rem;
  }

  .archive-details {
    margin-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen::before,
  .screen::after,
  .noise,
  .lockup,
  .studio .lockup-mark,
  .atelier .lockup,
  .atelier .lockup-mark,
  .wordmark-flash {
    animation: none;
  }

  .screen::after,
  .wordmark-flash {
    display: none;
  }
}