/* =====================================================================
   arc — creative house
   Single-screen paper poster
   ===================================================================== */

:root {
  --paper: #e7e0d2;          /* fallback paper tone */
  --warm: 236, 226, 205;     /* warm overlay (rgb) */
  --warm-strength: 0.30;     /* try warmer. Original look = 0.22 (revert here) */
  --ink: #2b2925;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Composition scale knobs — tune these to taste */
  --logo-w: clamp(9rem, 23vw, 23rem);
  --desc-w: clamp(8rem, 20vw, 17rem);
  --contact-w: clamp(4.4rem, 7vw, 6.4rem);
  --stack-gap: clamp(1rem, 2.6vh, 2.2rem);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;                 /* single static screen */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;   /* no blue flash on tap (mobile) */
}

/* ---------- Paper background ---------- */
.paper {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/paper-bg.jpg");
  background-size: cover;
  background-position: center;
  /* subtle warm wash so the grey paper reads a touch more like a creative-house sheet */
  box-shadow: inset 0 0 0 100vmax rgba(var(--warm), var(--warm-strength));
  transform: scale(1.04);           /* small overscan; stays static (no parallax) */
  opacity: 0.60;
  will-change: transform;
}

/* ---------- Vignette ---------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 42%,
      rgba(0, 0, 0, 0) 55%,
      rgba(40, 34, 26, 0.10) 82%,
      rgba(40, 34, 26, 0.22) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Film grain ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  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='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 620ms steps(4) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -5%); }
  75%  { transform: translate(-3%, 2%); }
  100% { transform: translate(2%, -3%); }
}

/* ---------- Stage / composition ---------- */
.stage {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  min-height: 100svh;
  padding: max(4vh, 1.5rem) 6vw;
}

.composition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
  width: 100%;
  max-width: 60rem;
  will-change: transform;
}

.layer {
  display: flex;
  justify-content: center;
  will-change: transform;
}

/* pencil marks meld into the paper grain */
.mark {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;      /* no "save image" popup on long-press (iOS) */
  mix-blend-mode: multiply;
}

.logo {
  width: 100%;
  filter: contrast(1.04);
}

/* logo + drawable arc share a wrapper so the arc can crown the wordmark */
.logo-wrap {
  position: relative;
  display: inline-block;
  width: var(--logo-w);
  line-height: 0;
}
.arc-draw {
  position: absolute;
  left: 50%;
  bottom: 62%;
  transform: translateX(-50%);
  width: 106%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
}
#arcPath {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.3s linear;
}

.desc {
  width: var(--desc-w);
  opacity: 0.92;
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.contact__mark {
  width: var(--contact-w);
}
.contact:hover,
.contact:focus-visible {
  transform: translateY(-4px) rotate(-1.2deg);
  filter: contrast(1.12);
}
.contact:focus-visible { outline: none; }

.contact__email {
  width: clamp(4.6rem, 9vw, 6.8rem);
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.contact:hover .contact__email,
.contact:focus-visible .contact__email {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--paper);
  pointer-events: none;
}

/* ---------- Tiny hand-drawn year ---------- */
.year {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 4;
  width: clamp(3rem, 5.8vw, 4.2rem);
  height: auto;
  opacity: 0.9;
  mix-blend-mode: multiply;
  user-select: none;
  pointer-events: none;
}

/* ---------- Custom pencil cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(43, 41, 37, 0.82);
  border: 1.5px solid transparent;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.3s var(--ease),
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    margin 0.35s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease);
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-active {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  background: rgba(43, 41, 37, 0);
  border-color: rgba(43, 41, 37, 0.6);
}
body.has-custom-cursor,
body.has-custom-cursor .contact { cursor: none; }

/* ---------- Intro states (JS adds .is-ready to <html>) ---------- */
.logo, .desc, .contact { opacity: 0; }

html:not(.is-ready) .composition { visibility: hidden; }

/* Reduced motion — show everything statically */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .logo, .desc, .contact { opacity: 1 !important; transform: none !important; }
  .preloader { display: none; }
  .cursor { display: none; }
  #arcPath { stroke-dashoffset: 0 !important; }
}

/* ---------- Portrait / mobile ---------- */
@media (max-width: 640px) {
  :root {
    --logo-w: clamp(12rem, 66vw, 20rem);
    --desc-w: clamp(11rem, 60vw, 18rem);
    --contact-w: clamp(5rem, 26vw, 8rem);
    --stack-gap: clamp(1.2rem, 4.5vh, 2.4rem);
  }
  .contact__email { width: clamp(6.5rem, 46vw, 11rem); }
  .stage { padding: max(3vh, 1.2rem) 8vw; }
}

/* ---------- Short / landscape screens — keep it on one screen ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --logo-w: clamp(8rem, 26vh, 16rem);
    --desc-w: clamp(7rem, 22vh, 14rem);
    --contact-w: clamp(4rem, 12vh, 6rem);
    --stack-gap: clamp(0.6rem, 2vh, 1.4rem);
  }
}