/* ==================================================================
   Stramm — Launch Experience (holding page)
   Swiss-poster brutalist: masthead, oversized logotype + statement,
   studio grid, connect footer.
   ================================================================== */

/* ------------------------------------------------------------------
   Local palette
   Note: this page ships slightly different hexes than the design-system
   tokens (#2323ff vs --color-bright-blue #1922fa, #0c0c4d vs
   --color-navy #0a0e3f). The page values are kept verbatim from the
   design file — they read hotter against the #141414 canvas. Point
   these at the tokens in css/tokens.css if the two should converge.
   ------------------------------------------------------------------ */
:root {
  --stramm-blue: #2323ff;
  --stramm-navy: #0c0c4d;
  --stramm-canvas: #141414;
  --stramm-line: rgba(255, 255, 255, 0.16);
  --stramm-tile: rgba(18, 18, 21, 0.62);
  --stramm-text: #ffffff;
  --stramm-text-soft: #c8c8c8;
  --stramm-text-dim: #b5b5b5;
  --stramm-text-mute: #6b6b72;
}

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

html {
  background: var(--stramm-canvas);
}

body {
  margin: 0;
}

/* ==================================================================
   KEYFRAMES
   ================================================================== */
@keyframes strammSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes strammFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes strammLogoIn {
  0%   { opacity: 0; transform: scale(0.35) rotate(-140deg); filter: blur(4px); }
  62%  { opacity: 1; transform: scale(1.14) rotate(10deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes strammReveal {
  0%   { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 108% 0); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(-18% -6% -18% -6%); filter: blur(0); }
}

@keyframes strammPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); }
  50%      { opacity: 1; transform: scaleY(1); }
}

/* ==================================================================
   ANIMATION UTILITIES
   ================================================================== */
.stramm-fade { animation: strammFadeUp 700ms cubic-bezier(.2, .85, .2, 1) both; }
.stramm-fade.d1 { animation-delay: 120ms; }
.stramm-fade.d2 { animation-delay: 240ms; }
.stramm-fade.d3 { animation-delay: 360ms; }
.stramm-fade.d4 { animation-delay: 480ms; }

/* on-load text reveal */
.reveal {
  animation: strammReveal 820ms cubic-bezier(.2, .85, .2, 1) both;
  will-change: transform, opacity, clip-path;
}
.reveal.r1 { animation-delay: 100ms; }
.reveal.r2 { animation-delay: 240ms; }
.reveal.r3 { animation-delay: 420ms; }
.reveal.r4 { animation-delay: 560ms; }
.reveal.r5 { animation-delay: 700ms; }

/* ==================================================================
   PAGE SHELL
   ================================================================== */
.le-page {
  background: var(--stramm-canvas);
  color: var(--stramm-text);
  font-family: var(--font-body);
  min-height: 100vh;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

/* Interactive dither field — painted by js/dither.js */
.le-dither {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.le-frame {
  position: relative;
  z-index: 1;
  border: 1px solid var(--stramm-line);
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 28px);
  gap: 14px;
}

/* ==================================================================
   SHARED TYPE
   ================================================================== */
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.bru-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stramm-text-mute);
}
.bru-label .idx { color: var(--stramm-blue); }

.bru-arrow {
  transition: color 180ms ease-out, transform 180ms ease-out;
}

/* ==================================================================
   MASTHEAD
   ================================================================== */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--stramm-line);
}

.masthead-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stramm-le-logo {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  transition: transform 300ms ease-out;
}
/* contain, never cover — cover would crop a non-square mark */
.stramm-le-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  animation: strammLogoIn 950ms cubic-bezier(.2, .8, .2, 1) both;
}
.stramm-le-logo:hover { transform: rotate(6deg) scale(1.06); }

.masthead-id {
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--stramm-text-dim);
}

.masthead-slogan {
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--stramm-text-dim);
}

/* ==================================================================
   BENTO GRID
   ================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(96px, auto);
  gap: 14px;
  flex: 1;
}

.tile {
  border: 1px solid var(--stramm-line);
  display: flex;
  flex-direction: column;
  background: var(--stramm-tile);
  transition:
    border-color 200ms ease-out,
    background 200ms ease-out,
    transform 260ms cubic-bezier(.2, .85, .2, 1),
    box-shadow 260ms ease-out;
}

.tile-pad { padding: clamp(22px, 2.4vw, 34px); }

a.tile {
  text-decoration: none;
  color: var(--stramm-text);
  cursor: pointer;
}
a.tile:hover,
a.tile:focus-visible {
  border-color: var(--stramm-blue);
  background: rgba(35, 35, 255, 0.10);
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 35, 255, 0.20);
}
a.tile:active { transform: translateY(-1px) scale(0.994); }
a.tile:hover .bru-arrow {
  color: var(--stramm-text);
  transform: translateX(3px);
}

/* Placeholder links (config.js entry still unset) must not open a blank tab. */
a.tile[aria-disabled='true'] { cursor: default; }

/* --- grid placement ---------------------------------------------- */
.t-hero    { grid-column: span 8; grid-row: span 2; }
.t-pov     { grid-column: span 4; }
.t-profile { grid-column: span 4; }
.t-studio  { grid-column: span 4; }
/* bottom row: 6 + 3 + 3 = 12 */
.t-connect { grid-column: span 6; }
.t-whisper { grid-column: span 3; }
.t-status  { grid-column: span 3; }

/* ==================================================================
   HERO
   ================================================================== */
.t-hero {
  justify-content: center;
  gap: clamp(20px, 3vh, 30px);
}

.hero-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.2rem, 1rem + 4.6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 15.5ch;
  text-align: left;
}

/* the underline-bar motif — brand's most distinctive device */
.hero-hl {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero-hl > .hl-text {
  position: relative;
  z-index: 1;
}
.stramm-hl-bar {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: 8px;
  height: 34%;
  background: var(--stramm-blue);
  z-index: 0;
  transform-origin: left center;
  animation: strammSweep 640ms 760ms cubic-bezier(.2, .85, .2, 1) both;
}

.hero-lede {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--stramm-text-soft);
  margin: 0;
  max-width: 42ch;
}
.hero-lede strong {
  color: var(--stramm-text);
  font-weight: 700;
}

/* ==================================================================
   POINT OF VIEW
   ================================================================== */
.t-pov {
  justify-content: center;
  gap: 14px;
}
.pov-text {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.pov-text .accent { color: var(--stramm-blue); }

/* ==================================================================
   COMPANY PROFILE CTA
   ================================================================== */
.t-profile {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.profile-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stramm-blue);
  color: var(--stramm-text);
}
.profile-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.profile-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--stramm-text-dim);
}
.profile-arrow {
  font-size: 18px;
  color: var(--stramm-text-mute);
}

/* ==================================================================
   STUDIO TILES — logo is the hero
   ================================================================== */
.studio {
  padding: 0;
  overflow: hidden;
}

.studio-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 3vw, 46px);
  min-height: 150px;
  position: relative;
}
/* Logos scale to fit their panel and are never cropped: both axes are
   bounded, both dimensions stay auto so the intrinsic aspect ratio drives
   the other, and object-fit:contain is a belt-and-braces guard in case a
   future asset ships with a mismatched intrinsic size.
   Height budget comes from --logo-h, set per studio below. */
.studio-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: var(--logo-h, 110px);
  object-fit: contain;
  transition:
    transform 320ms cubic-bezier(.2, .85, .2, 1),
    filter 320ms ease-out;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.studio:hover .studio-panel img,
.studio:focus-visible .studio-panel img { transform: scale(1.07); }

.studio-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), transparent 62%);
  opacity: 0;
  transition: opacity 320ms ease-out;
  pointer-events: none;
}
.studio:hover .studio-panel::after,
.studio:focus-visible .studio-panel::after { opacity: 1; }

/* per-studio panel wash + logo height budget.
   The clamp upper bound is the design's desktop size; the vw term shrinks
   the mark as the 4-column tile narrows, and the lower bound stops it
   collapsing on small screens. */
.studio-cenic   .studio-panel { background: rgba(35, 35, 255, 0.10); }
.studio-cenic   { --logo-h: clamp(40px, 4.2vw, 54px); }
.studio-bold    .studio-panel { background: rgba(240, 64, 12, 0.08); }
.studio-bold    { --logo-h: clamp(84px, 9.2vw, 118px); }
.studio-academy .studio-panel { background: rgba(91, 78, 240, 0.10); }
.studio-academy { --logo-h: clamp(92px, 10.2vw, 130px); }

.studio-meta {
  padding: 20px 22px 22px;
  border-top: 1px solid var(--stramm-line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.studio-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.studio-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--stramm-text);
}
.studio-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--stramm-text-mute);
  flex-shrink: 0;
}
.studio-role {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--stramm-text-dim);
}
.studio .s-go {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stramm-text-mute);
  transition: color 180ms ease-out;
}
.studio:hover .s-go,
.studio:focus-visible .s-go { color: var(--stramm-blue); }
.studio:hover .studio-name { color: var(--stramm-text); }

/* ==================================================================
   CONNECT
   ================================================================== */
.t-connect {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.connect-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-row {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.connect-squares { display: flex; gap: 8px; }
.connect-squares span {
  width: 26px;
  height: 26px;
}
.connect-squares span:nth-child(1) { background: var(--stramm-blue); }
.connect-squares span:nth-child(2) { background: var(--stramm-navy); }

/* bare social */
.stramm-soc {
  width: 30px;
  height: 30px;
  display: flex;
  color: var(--stramm-text);
  transition: transform 180ms ease-out, color 180ms ease-out;
}
.stramm-soc:hover,
.stramm-soc:focus-visible {
  color: var(--stramm-blue);
  transform: translateY(-3px);
  outline: none;
}

/* ==================================================================
   STATUS
   ================================================================== */
.t-whisper,
.t-status {
  justify-content: flex-end;
  gap: 12px;
}
.status-lines {
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.9;
  color: var(--stramm-text-dim);
}

/* email — quiet mono line.
   The address is 26 characters of tracked mono in a 3-column tile, so it
   cannot always sit on one line. Tracking is eased off slightly to keep it
   unwrapped where there is room, a <wbr> after the "@" gives it a clean
   break point, and overflow-wrap is the hard guard that stops it spilling
   past the tile border at any width. */
.email-mini {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.9;
  color: var(--stramm-text-dim);
  text-decoration: none;
  transition: color 180ms ease-out;
  overflow-wrap: anywhere;
}
.email-mini span { color: var(--stramm-text-mute); }
.email-mini:hover,
.email-mini:focus-visible {
  color: var(--stramm-blue);
  outline: none;
}
.email-mini:hover span { color: #8a8a90; }

/* ==================================================================
   HERO MICRO-GRAPHIC — signal-square motif
   Authored in the design file but not currently placed in the markup.
   Kept so it can be dropped into the hero without re-deriving it:
     <div class="stramm-mg" aria-hidden="true">
       <span></span> x6 <span class="mg-caption">…</span>
     </div>
   ================================================================== */
.stramm-mg {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 22px;
}
.stramm-mg span {
  display: block;
  width: 9px;
  transform-origin: bottom;
  animation: strammPulse 1.8s ease-in-out infinite both;
}
.stramm-mg span:nth-child(1) { height: 10px; background: var(--stramm-navy); animation-delay: 0ms; }
.stramm-mg span:nth-child(2) { height: 22px; background: var(--stramm-blue); animation-delay: 140ms; }
.stramm-mg span:nth-child(3) { height: 14px; background: var(--stramm-blue); animation-delay: 280ms; }
.stramm-mg span:nth-child(4) { height: 22px; background: var(--stramm-navy); animation-delay: 420ms; }
.stramm-mg span:nth-child(5) { height: 8px;  background: var(--stramm-blue); animation-delay: 560ms; }
.stramm-mg span:nth-child(6) { height: 16px; background: var(--stramm-blue); animation-delay: 700ms; }
.stramm-mg .mg-caption {
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stramm-text-mute);
  align-self: center;
  margin-left: 8px;
  animation: none;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* --- Tablet + mobile: stack the bento ----------------------------- */
@media (max-width: 820px) {
  .bento { grid-auto-rows: auto; }
  .bento > * {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Section 01 carries the page's primary message, so it claims a fixed
     share of the viewport instead of being sized by its content — it
     should always be visible without scrolling.
     At this height the content would otherwise float in the middle of a
     mostly-empty tile, so it spreads instead: index pinned top, lede
     pinned bottom, headline between them. */
  .t-hero {
    min-height: 62vh;
    justify-content: space-between;
  }

  /* Tiles are full-width once stacked, so there is room for the marks at
     their full size again — the vw term above would otherwise shrink them
     exactly where the panel got wider. */
  .studio-cenic   { --logo-h: 54px; }
  .studio-bold    { --logo-h: 118px; }
  .studio-academy { --logo-h: 130px; }
}

/* --- Tablet only --------------------------------------------------
   Point Of View and Company Profile pair up on one row. Both are short
   blocks, and side by side they stop the stack reading as one long
   column of full-width slabs.
   Same specificity as the stacking rule above, declared after it, so it
   wins without needing !important. */
@media (min-width: 641px) and (max-width: 820px) {
  .t-pov,
  .t-profile { grid-column: span 6; }

  /* "(00) Holding Page" is dropped from the masthead here — with the
     brand lockup and slogan it reads as clutter at this width. */
  .masthead .bru-label { display: none; }

  /* Point Of View: the display-tight base tracking reads cramped once the
     statement drops to this tile's ~half-width column, so ease it off and
     give the wrapped lines a little more air. */
  .t-pov .pov-text {
    letter-spacing: -0.008em;
    line-height: 1.18;
  }
}

/* --- Mobile -------------------------------------------------------- */
@media (max-width: 640px) {
  /* Masthead centres. The mark and wordmark stay locked up as a single
     horizontal unit; label and slogan centre beneath it. */
  .masthead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .masthead-brand { justify-content: center; }
  .masthead .masthead-slogan { text-align: center; }

  /* Drop the "Stramm Creative Agency / Est. 2022" wordmark on mobile so
     the brand lockup collapses to just the centred mark. */
  .masthead-id { display: none; }

  /* Negative tracking is tuned for large display sizes; at mobile type
     sizes the same values read as cramped. Ease it off and open the
     leading — most noticeably on the Point Of View statement, which is
     the tightest of the three. */
  .hero-title {
    letter-spacing: -0.018em;
    line-height: 1.02;
  }
  .pov-text {
    letter-spacing: -0.005em;
    line-height: 1.26;
  }

  .tile-pad { padding: 22px 20px; }
  .t-connect {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  /* decorative accent squares — dropped on mobile */
  .connect-squares { display: none; }
  .studio-panel { min-height: 132px; }
  .stramm-mg { height: 20px; }
}

@media (max-width: 440px) {
  .masthead .bru-label { display: none; }
  .studio-meta { padding: 16px 18px 18px; }
  .stramm-soc { width: 26px; height: 26px; }
}

/* ==================================================================
   REDUCED MOTION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stramm-le-logo img,
  .stramm-hl-bar,
  .stramm-fade,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  .stramm-mg span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}