/* =========================================================
   MEDINI CLAY STUDIO — Version 3
   Single screen. No scrolling. Logo, bio, Instagram.

   The composition: the striped ground from the logo runs the
   full page, and the content sits straight on it — the page
   is the logo, opened out.
   ========================================================= */

/* ---------- Brand tokens ---------- */

:root {
  --red:        #671313;
  --blue-mid:   #B6D2F6;
  --blue-light: #DEECFF;

  /* Red at low opacity, for rules and shadows. These sit on the stripes,
     so they have to work over both blues — a flat colour would disappear
     against whichever stripe it matched. */
  --rule:       rgba(103, 19, 19, 0.40);
  --shadow:     rgba(103, 19, 19, 0.22);

  --font: "Rosario", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;

  --stripe-w: clamp(1.6rem, 4.4vw, 3.25rem);
  --pad-x:    clamp(1.5rem, 6vw, 4rem);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

/* No scrolling — the page is exactly one screen. */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--blue-light);
  color: var(--red);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}


/* ---------- The striped ground, lifted from the logo ---------- */

.stage {
  /* dvh keeps it exactly one screen on phones, where the browser
     chrome slides away and vh would overshoot */
  height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

/* The striped ground sits on its own layer so it can drift with the
   pointer. Inset past the edges so the drift never exposes a gap. */
.stage::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--blue-light) 0,
    var(--blue-light) var(--stripe-w),
    var(--blue-mid)   var(--stripe-w),
    var(--blue-mid)   calc(var(--stripe-w) * 2)
  );
  /* --sx / --sy are set by js/main.js from the pointer position */
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0);
  will-change: transform;
}

.label { position: relative; }


/* ---------- The content block ---------- */
/* The striped ground now runs the full page, so this is layout only —
   no fill, no borders. Everything sits directly on the stripes, the way
   the wordmark does in the logo itself. */

.label {
  width: 100%;
  /* without this the block can be stretched wider than the screen by its
     own contents, and the centred grid then pushes its left edge off-screen */
  max-width: 100%;
  padding: clamp(2rem, 7vh, 4.25rem) var(--pad-x);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4.5vh, 2.75rem);
}


/* ---------- Wordmark lockup ---------- */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.8vh, 1.1rem);
  font-weight: 400;
}

/* Sized against both axes so the lockup never outgrows a short screen */
.wordmark {
  display: block;
  width: clamp(11rem, 42vmin, 27rem);
  max-width: 100%;
  height: auto;
  color: var(--red);
}

.lockup__sub {
  font-size: clamp(0.7rem, 2.1vmin, 1.05rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  /* letter-spacing adds a trailing gap after the last letter;
     this pulls the word back to true optical centre */
  text-indent: 0.42em;
  line-height: 1;
}


/* ---------- The one line ---------- */

.line {
  font-size: clamp(0.95rem, 2.05vmin, 1.18rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  /* A short measure suits the copy: four quick sentences land better on
     short lines than in one wide block.
     min() so it never demands more width than the screen has. */
  max-width: min(40ch, 100%);
  text-wrap: balance;
}

/* A short rule between the line and the Instagram call, standing in
   for a divider without another border or box */
.line::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  /* red, not blue — a blue rule would disappear against the blue stripes */
  background: var(--rule);
  margin: clamp(1.1rem, 3vh, 1.6rem) auto 0;
}


/* ---------- Instagram ---------- */

.follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.follow__label {
  font-size: clamp(0.62rem, 1.5vmin, 0.76rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  /* 0.8, not lower: on the darker stripe anything below ~0.75 drops this
     small text under the 4.5:1 contrast minimum */
  opacity: 0.8;
}

/* The button is styled as a stamp: it sits proud of the page on a hard
   offset shadow, lifts when you reach for it, and presses flat into the
   surface when clicked — the way a maker's stamp presses into clay. */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;

  /* comfortably past the 44px minimum for touch */
  min-height: 50px;
  padding: 0.72em 1.5em;

  font-size: clamp(1rem, 2.7vmin, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;

  color: var(--blue-light);
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 2px;

  cursor: pointer;
  /* a translucent red shadow reads the same over either stripe; a solid
     blue one would vanish every time it crossed a blue stripe */
  box-shadow: 5px 5px 0 var(--shadow);
  transition: transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease),
              color 0.18s var(--ease);
}

.stamp__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.stamp:hover {
  background: var(--blue-light);
  color: var(--red);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow);
}

/* Pressed: the stamp meets the surface and the shadow disappears */
.stamp:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--shadow);
  transition-duration: 0.05s;
}

.stamp:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 5px;
}


/* ---------- Short screens ---------- */
/* On a landscape phone there is very little height, so the band
   tightens rather than letting anything spill off-screen. */

@media (max-height: 520px) {
  .label { padding-block: clamp(1rem, 4vh, 1.75rem); gap: 1rem; }
  .wordmark { width: clamp(9rem, 30vmin, 16rem); }
  .line::after { margin-top: 0.85rem; }
  .stamp { min-height: 44px; padding: 0.55em 1.2em; }
}

/* ---------- Entrance ---------- */
/* A short settle on load, so the page arrives rather than just being
   there. It starts partly visible, never at zero — the first frame
   anyone sees (or a link preview captures) is always readable. */

@keyframes settle {
  from {
    transform: translateY(11px);
    opacity: 0.55;
  }
}

.lockup,
.line,
.follow {
  animation: settle 0.6s var(--ease) backwards;
}

.line   { animation-delay: 0.09s; }
.follow { animation-delay: 0.18s; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  /* the drift is pointer-driven, so it is simply never applied */
  .stage::before { transform: none; }
}