/* ═══════════════════════════════════════════════════════════════════════
   KIRONPUNOJA — holding page
   Same three tones and two faces as the main site. One idea: the mark
   smoulders. An ember field drifts upward behind the logo, clipped to the
   silhouette by a CSS mask, so it only ever shows inside the thorns.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0A0A0B;
  --bone:       #E8E2D4;
  --sulphur:    #C7BC3E;

  --bone-70:   rgb(232 226 212 / .72);
  --bone-45:   rgb(232 226 212 / .58);
  --bone-28:   rgb(232 226 212 / .46);
  --bone-decor:rgb(232 226 212 / .26);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease:   cubic-bezier(.22, 1, .36, 1);

  color-scheme:dark;
}

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

html{ background:var(--ink); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

::selection{ background:var(--sulphur); color:var(--ink); }
:focus-visible{ outline:1px solid var(--sulphur); outline-offset:4px; }

h1,p{ margin:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}


/* ═══ AMBIENT LAYERS ══════════════════════════════════════════════════ */
.ash{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.grain{
  position:fixed; inset:0;
  z-index:3; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:grain 6s steps(1) infinite;
}
@keyframes grain{
  0%  { background-position:0 0 }
  20% { background-position:-40px 22px }
  40% { background-position:28px -34px }
  60% { background-position:-22px -18px }
  80% { background-position:36px 30px }
  100%{ background-position:0 0 }
}


/* ═══ STAGE ═══════════════════════════════════════════════════════════ */
.stage{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:clamp(1.5rem, 4vh, 2.75rem);
  padding:clamp(4.5rem,10vh,7rem) var(--gutter) clamp(5.5rem,12vh,8rem);
  text-align:center;
}


/* ═══ THE MARK ════════════════════════════════════════════════════════
   Capped by height as well as width, using the artwork's own ratio, so a
   short or wide viewport can never crop it or crowd the copy below. */
.mark{
  width:min(88vw, calc(52svh * 1.8186));
  margin:0;
}
.mark__field{
  display:block;
  width:100%;
  aspect-ratio:2657 / 1461;

  /* Masked against the source logo in the repo root rather than a copy:
     the silhouette is white-on-transparent, so its alpha already is the
     mask, and there is no derived file to fall out of date when the
     artwork changes. */
  -webkit-mask-image:url("kironpunoja-logo.svg");
          mask-image:url("kironpunoja-logo.svg");
  -webkit-mask-size:contain;   mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;

  /* Until the canvas paints, the mask over a flat bone ground already
     renders the logo correctly — so nothing pops in. */
  background:var(--bone);

  animation:breathe 11s var(--ease) infinite;
}
.mark__canvas{ display:block; width:100%; height:100%; }

/* Barely there — enough to read as alive, not as movement. */
@keyframes breathe{
  0%,100%{ transform:scale(1) }
  50%    { transform:scale(1.008) }
}

.mark__static{ width:100%; height:auto; }

/* Narrow screens have vertical room to spare and no reason to hold a wide
   margin, so let the mark run closer to the edges. */
@media (max-width:600px){
  .mark{ width:min(93vw, calc(52svh * 1.8186)); }
}


/* ═══ COPY ════════════════════════════════════════════════════════════ */
.rule{ width:clamp(3rem,10vw,7rem); height:1px; overflow:hidden; }
.rule i{
  display:block; width:100%; height:100%;
  background:var(--bone-28);
  transform-origin:center;
  animation:draw 7s var(--ease) infinite;
}
@keyframes draw{
  0%,100%{ transform:scaleX(.25); opacity:.5 }
  50%    { transform:scaleX(1);   opacity:1 }
}

.soon{
  font-size:clamp(.68rem,1.6vw,.8rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  text-indent:.42em;          /* balance the trailing letter-space */
  color:var(--bone-45);
}

.line{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.15rem,3vw,1.9rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--bone-70);
  text-wrap:balance;
}


/* ═══ FOOT ════════════════════════════════════════════════════════════ */
.foot{
  position:fixed;
  inset:auto 0 0 0;
  z-index:2;
  display:flex;
  justify-content:center;
  padding:0 var(--gutter) clamp(1.5rem,4vh,2.5rem);
}
.foot a{
  position:relative;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-28);
  text-decoration:none;
  transition:color .5s var(--ease);
}
.foot a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.foot a:hover,
.foot a:focus-visible{ color:var(--sulphur); }
.foot a:hover::after,
.foot a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }


/* ═══ REDUCED MOTION ══════════════════════════════════════════════════
   The ember field renders a single static frame (handled in JS); every
   ambient loop here stops. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ animation:none; }
  .mark__field{ animation:none; }
  .rule i{ animation:none; transform:scaleX(1); opacity:1; }
}