/* ============================================================
   FREY DESIGN — freydesignco.com
   Dark / cinematic single page
   Palette: white · black · grey    Type: ProV Architect
   ============================================================ */

@font-face {
  font-family: "ProV Architect";
  src: url("fonts/ProvArchitectNDP.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ProV Architect";
  src: url("fonts/ProvArchitectNDP-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #000000;
  --ink: #ffffff;
  --grey: #8c8c8c;
  --grey-dim: #6a6a6a;
  --line: rgba(255, 255, 255, 0.16);
  --field-bg: rgba(255, 255, 255, 0.03);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "ProV Architect", "Bradley Hand", "Segoe Script", cursive;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.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;
}

/* ---------- Atmosphere: grain + vignette ---------- */
.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 45%,
    transparent 42%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%);
}

.grain {
  position: absolute; inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainShift 0.6s steps(3) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Stage / Hero ---------- */
.stage { position: relative; z-index: 2; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* ---------- Opening background: hazy diagonal shaft of light ---------- */
/* Background image slot — drop your shaft-of-light photo in as
   assets/background.jpg and it fills the hero. Black until then. */
.lightshaft {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background-color: #000;
  background-image: url("assets/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.play .lightshaft { opacity: 1; }
/* as the logo resolves, dim the room so the mark reads on near-black */
.to-mark .lightshaft { opacity: 0.35; transition: opacity 1.8s var(--ease); }

/* ---------- Handwritten tagline (writes on slowly, sits below the logo) ---------- */
.tagline {
  text-align: center;
  font-size: clamp(1.02rem, 2.5vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: 0.08em;
  color: var(--ink);
  /* dark halo keeps the thin letters legible over the bright light beam */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.9);
  /* gentle ease-in-out so the slide-down glides rather than snaps */
  transition: transform 1.9s cubic-bezier(0.65, 0, 0.35, 1);
}
/* JS present: tagline first sits near the middle of the page... */
.js .tagline { transform: translateY(-15vh); }
/* ...then drops to its resting place below the logo as the mark resolves. */
.to-mark .tagline { transform: translateY(0); }
.tagline .line {
  display: block;
  clip-path: inset(0 100% -0.2em 0);
  opacity: 0;
}
/* Two-line set for desktop/tablet; four-line set for phones (swapped below). */
.tagline .narrow { display: none; }
.play .tagline .line {
  animation: writeOn 2.05s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--i) * 0.95s);
}
@keyframes writeOn {
  0%   { clip-path: inset(0 100% -0.2em 0); opacity: 0; }
  6%   { opacity: 1; }
  100% { clip-path: inset(0 0 -0.2em 0); opacity: 1; }
}

/* ---------- The FREY DESIGN mark + tagline lockup ---------- */
.center {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10vh 6vw 18vh;
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.6vh, 2.6rem);
}
/* On wide screens only, nudge the mark + tagline right to clear the beam.
   On phones/tablets the beam is cropped out, so keep everything centered. */
@media (min-width: 900px) {
  .lockup { transform: translateX(clamp(1.5rem, 7vw, 6.5rem)); }
}

.mark {
  position: relative;
  opacity: 1;   /* static default (no-JS) */
  transition: opacity 1.5s var(--ease), transform 1.9s var(--ease), filter 1.5s var(--ease);
}
.mark img {
  display: block;
  width: min(660px, 90vw);
  height: auto;
  /* tight glow that hugs each letter — not a big halo */
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.65))
    drop-shadow(0 0 9px rgba(255,255,255,0.4));
}
/* JS present: hold the mark hidden until it resolves in */
.js .mark { opacity: 0; transform: scale(1.02); filter: blur(5px); }
.to-mark .mark { opacity: 1; transform: scale(1); filter: blur(0); }

/* ---------- Contact CTA ---------- */
.contact-cta {
  position: absolute;
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  bottom: clamp(8%, 11vh, 13%);
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  letter-spacing: 0.14em;
  padding: 0.55em 2em 0.62em;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease),
              border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.js .contact-cta { opacity: 0; transform: translateY(10px); }
.cta-in .contact-cta { opacity: 1; transform: translateY(0); }
.contact-cta:hover,
.contact-cta:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: #000;
  outline: none;
}

/* ---------- Footer: centered copyright only ---------- */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.1rem 6vw;
  font-family: inherit;
  font-size: clamp(0.6rem, 1.3vw, 0.72rem);
  letter-spacing: 0.08em;
  color: var(--grey-dim);
}
.js .site-footer { opacity: 0; transition: opacity 1s var(--ease); }
.cta-in .site-footer { opacity: 1; }

/* ---------- Contact overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 6vh 6vw;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.overlay[hidden] { display: none; }
.overlay.visible { opacity: 1; }

.overlay-inner {
  position: relative;
  width: min(560px, 100%);
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.05s, transform 0.6s var(--ease) 0.05s;
}
.overlay.visible .overlay-inner { transform: translateY(0); opacity: 1; }

.overlay-close {
  position: absolute; top: -2.8rem; right: -0.3rem;
  background: none; border: none; color: var(--grey);
  font-family: inherit;
  font-size: 2.1rem; line-height: 1; cursor: pointer;
  transition: color 0.3s ease;
}
.overlay-close:hover { color: var(--ink); }

.form-heading {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.8vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 1.7rem;
  letter-spacing: 0.03em;
}

/* ---------- Form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 1.05rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: flex; gap: 1.1rem; }
.field-row .field { flex: 1; }

.contact-form label {
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--grey);
}

.contact-form input,
.contact-form textarea {
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.15rem;
  padding: 0.7em 0.8em;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.35; }
.contact-form ::placeholder { color: var(--grey-dim); opacity: 1; }

.submit-btn {
  margin-top: 0.5rem;
  appearance: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #000;
  font-family: inherit;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  padding: 0.65em 2em;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.3s ease;
}
.submit-btn:hover:not(:disabled) {
  background: #cfcfcf;
  border-color: #cfcfcf;
  color: #000;
}
.submit-btn:disabled { opacity: 0.5; cursor: default; }

.form-status {
  font-family: inherit;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  min-height: 1.2em;
  color: var(--grey);
}
.form-status.error { color: var(--ink); }
.form-status.success { color: var(--ink); }

/* honeypot — visually removed, still in DOM */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .field-row { flex-direction: column; gap: 1.05rem; }
  .contact-cta { letter-spacing: 0.1em; }
  .mark img { width: 84vw; }
  /* Phones: use the four-line set so the type can stay large and readable. */
  .center { padding-left: 3vw; padding-right: 3vw; }
  .tagline .wide { display: none; }
  .tagline .narrow { display: block; }
  .tagline { font-size: clamp(0.95rem, 4.55vw, 1.5rem); letter-spacing: 0.05em; line-height: 1.4; }
  .tagline .line { white-space: nowrap; }
  /* four lines instead of two — tighten the stagger so the writing still
     finishes before the tagline slides down */
  .play .tagline .line {
    animation-duration: 1.4s;
    animation-delay: calc(0.9s + var(--i) * 0.68s);
  }
  /* shift the shaft and ease it back so the tagline reads over it */
  .lightshaft { background-position: 32% center; }
  .play .lightshaft { opacity: 0.8; }
  .tagline { text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 22px rgba(0,0,0,0.95); }
  /* keep the form close button on-screen on small viewports */
  .overlay-close { top: -2.4rem; right: 0; }
}

/* ---------- Reduced motion: no draw-on, show final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .lightshaft { opacity: 0.5; }
  .tagline { transform: none; }
  .tagline .line { opacity: 1; clip-path: none; animation: none; }
  .mark { opacity: 1; transform: none; filter: none; }
  .mark img { filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)) drop-shadow(0 0 9px rgba(255,255,255,0.35)); }
  .contact-cta, .site-footer { opacity: 1; transform: none; }
  * { transition-duration: 0.001s !important; }
}