/* =========================================================
   Laura Work — portfolio landing
   Aesthetic: white, editorial, minimal. Everything else is light.
   ========================================================= */

:root{
  --bg:            #ffffff;
  --ink:           #101010;
  --ink-soft:      rgba(16,16,16,.52);
  --ink-faint:     rgba(16,16,16,.14);

  --rev:           #ffffff;                 /* inverted (over revealed photo) */
  --rev-shadow:    0 2px 26px rgba(0,0,0,.42);

  --dur:           300ms;                   /* spec: 300ms everywhere          */
  --ease:          cubic-bezier(.22,.61,.36,1);

  --pad:           clamp(1.15rem, 3.1vw, 3.4rem);
  --serif:         "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:          "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;                       /* single full-screen hero */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:var(--ink); color:#fff; }

/* ---------- stage & layers ------------------------------------ */

.stage{
  position:fixed; inset:0;
  height:100%; height:100svh;
  overflow:hidden;
  background:var(--bg);
}

/* the primary headshot gets a small overhang so parallax never shows an edge */
.layer{ position:absolute; display:block; }

.layer--base{
  inset:-3.2%;
  width:106.4%; height:106.4%;
  z-index:1;
}
.layer__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 32%;
  display:block;
  opacity:0;
  transition:opacity 1100ms var(--ease);
  /* placeholder tone while the photo loads */
  background:
    radial-gradient(120% 80% at 50% 20%, #f3f2f0 0%, #e9e7e4 55%, #ded9d4 100%);
}
.stage.is-ready .layer__img{ opacity:1; }
.layer__img.is-failed{ opacity:1; }         /* keep the tone visible if the file is missing */

.layer--waves{
  inset:0; width:100%; height:100%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1400ms var(--ease) 220ms;
}
.stage.is-ready .layer--waves{ opacity:1; }
.waves__group--dark  { mix-blend-mode:multiply; opacity:.30; }
.waves__group--light { mix-blend-mode:soft-light; opacity:.75; }

/* the gooey reveal — sits above the waves, below the type */
.layer--reveal{
  inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.layer--reveal.is-active{ opacity:1; }

/* ---------- ui grid ------------------------------------------- */

.ui{
  position:absolute; inset:0;
  z-index:4;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr auto;
  padding:var(--pad);
  pointer-events:none;
}
.ui > *{ pointer-events:auto; }

.brand     { grid-area:1 / 1 / 2 / 2; justify-self:start;  align-self:start; }
.portfolio { grid-area:1 / 3 / 2 / 4; justify-self:end;    align-self:start; }
.social    { grid-area:3 / 3 / 4 / 4; justify-self:end;    align-self:end; }
.colophon  { grid-area:3 / 1 / 4 / 2; justify-self:start;  align-self:end; }

/* parallax is written to these wrappers as an inline transform */
[data-ui]{ will-change:transform; }

/* clean-rect measurement (used by the hit-test cache) */
html.is-measuring [data-ui],
html.is-measuring [data-invert]{ transform:none !important; }

/* ---------- name ---------------------------------------------- */

.brand{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.9rem, 8.4vw, 7.6rem);
  line-height:.86;
  letter-spacing:-.018em;
  color:var(--ink);
  cursor:default;
  user-select:none;
  transition:color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.brand__line{
  display:block;
  opacity:0;
  transform:translateY(.42em);
}
.brand__line--last{
  font-style:italic;
  font-weight:400;
  margin-left:.14em;                      /* editorial indent on the second line */
  letter-spacing:.004em;
}
.stage.is-ready .brand__line{
  animation:rise 1100ms var(--ease) forwards;
}
.stage.is-ready .brand__line--first{ animation-delay:180ms; }
.stage.is-ready .brand__line--last { animation-delay:330ms; }

@keyframes rise{
  from{ opacity:0; transform:translateY(.42em); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- portfolio link ------------------------------------ */

.portfolio{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  margin:0;
  padding:.35em .1em .45em;
  font-family:var(--sans);
  font-size:clamp(.66rem, .82vw, .82rem);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  transition:color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.portfolio__arrow{
  font-size:.9em;
  transform:translate(0,0);
  transition:transform var(--dur) var(--ease);
}
.portfolio::after{
  content:"";
  position:absolute;
  left:.1em; right:.1em; bottom:.18em;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform 420ms var(--ease);
}
.portfolio:hover::after,
.portfolio:focus-visible::after{ transform:scaleX(1); transform-origin:left center; }
.portfolio:hover .portfolio__arrow,
.portfolio:focus-visible .portfolio__arrow{ transform:translate(.18em,-.18em); }

/* ---------- social -------------------------------------------- */

.social{
  display:flex;
  align-items:center;
  gap:clamp(.35rem, 1.5vw, 1.55rem);
  margin:0; padding:0;
  list-style:none;
}
.social__link{
  display:grid;
  place-items:center;
  width:clamp(2rem, 3.1vw, 2.7rem);
  height:clamp(2rem, 3.1vw, 2.7rem);
  color:var(--ink);
  text-decoration:none;
  transition:color var(--dur) var(--ease),
             opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             text-shadow var(--dur) var(--ease);
}
.social__link svg{
  width:clamp(1.05rem, 1.55vw, 1.42rem);
  height:auto;
  display:block;
  transition:transform var(--dur) var(--ease);
}
.social__link:hover,
.social__link:focus-visible{ transform:translateY(-3px); }
.social__link:hover svg{ transform:scale(1.07); }

/* ---------- colophon ------------------------------------------ */

.colophon{
  margin:0;
  padding:.3em 0;
  font-size:clamp(.58rem, .7vw, .72rem);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}

/* ---------- the inversion: black → white over 300ms ---------- */

.is-revealed{
  color:var(--rev) !important;             /* beats the base colour tokens     */
  text-shadow:var(--rev-shadow);
}
a.is-revealed, .brand.is-revealed{ color:var(--rev); }
.social__link.is-revealed{ opacity:1; }
.colophon.is-revealed{ color:var(--rev); }

/* ---------- curtain / loader ---------------------------------- */

.curtain{
  position:absolute; inset:0;
  z-index:6;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease);
}
.curtain__mark{
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--ink-faint);
  animation:pulse 1600ms var(--ease) infinite;
}
.stage.is-ready .curtain{
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}
@keyframes pulse{ 0%,100%{opacity:.25} 50%{opacity:.9} }

/* ---------- cursors & fallbacks ------------------------------- */

@media (hover:hover) and (pointer:fine){
  .stage{ cursor:none; }
  .portfolio, .social__link{ cursor:pointer; }
}
/* no blob on the keyboard-only path — keep a normal cursor */
.stage.is-static{ cursor:auto; }

.noscript{
  position:fixed;
  left:50%; bottom:14%;
  transform:translateX(-50%);
  z-index:9;
  max-width:min(34rem, 86vw);
  padding:.9rem 1.2rem;
  font-size:.8rem; letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
  background:rgba(255,255,255,.9);
  border:1px solid var(--ink-faint);
}

/* ---------- tiny screens -------------------------------------- */

@media (max-width:640px){
  :root{ --pad:1rem; }
  .brand{ font-size:clamp(2.2rem, 12vw, 3.2rem); }
  .portfolio__label{ letter-spacing:.2em; }
  .colophon{ max-width:52vw; }
}

/* ---------- reduced motion ------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .brand__line{ opacity:1; transform:none; }
  .layer__img, .layer--waves{ opacity:1; }
  .curtain{ display:none; }
}