/* CR Home | v2.6.4 — fixed top crop, safe-zone type (75%/45%), slide-up reveal, precise cursor */

:root{
  --bg:#000; --ink:#fff; --muted:#cbd5e1; --focus:#8ab4ff; --ink-hero:#0b0b0b;
  --crop-percent: 0.22;   /* crop a bit of sky */
  --align-nudge: 1px;
  --family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI",
            Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--family); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

#cr-page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}

/* ===== HERO ===== */
#cr-hero{position:relative;height:1px;overflow:hidden;background:#000}
#cr-hero .cr-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 100%;
  display:block; pointer-events:auto; backface-visibility:hidden;
}
.cr-fallback{z-index:0;opacity:0}
.cr-base{z-index:1}
.cr-overlay{
  z-index:2;
  cursor: default;                      /* default until JS proves pixel is opaque */
  transform-origin:50% 100%;
  transform:translate3d(0,100%,0);
  transition:transform 800ms cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  -webkit-mask-image:linear-gradient(#000 0 calc(100% - 1px), rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(#000 0 calc(100% - 1px), rgba(0,0,0,0) 100%);
}
#cr-hero.is-entered .cr-overlay{transform:translate3d(0,var(--align-nudge),0)}
#cr-hero.is-revealed .cr-overlay{transform:translate3d(0,100%,0)}

/* ===== Headline block (SAFE ZONE) ===== */
#cr-copy{
  position:absolute; z-index:3;
  top:clamp(10px,6vh,14vh);
  left:clamp(16px,6vw,96px);
  width:75%; max-width:60ch; color:var(--ink-hero);
  container-type:inline-size; /* enables cqw units */
}
#cr-copy h1{
  margin:0 0 .35rem; font-weight:800; letter-spacing:-.015em;
  line-height:1.06; font-size:clamp(28px,9cqw,56px); text-wrap:balance;
}
#cr-copy p{
  margin:0; font-weight:500; color:#334155; line-height:1.35;
  font-size:clamp(15px,4.2cqw,22px); max-width:56ch;
}
@media (min-width:900px){
  #cr-copy{ top:clamp(12px,10vh,16vh); left:clamp(32px,8vw,128px); width:45%; max-width:none }
  #cr-copy h1{ font-size:clamp(40px,6.5cqw,88px); line-height:1.04 }
  #cr-copy p { font-size:clamp(18px,2.8cqw,28px) }
}
@media (max-width:520px){ #cr-copy p{ max-width:28ch } }

/* ===== Secret link (shown when overlay slides down) ===== */
#cr-secret{
  position:absolute; z-index:1; right:clamp(12px,4vw,28px); bottom:clamp(12px,4vh,28px);
  display:inline-block; padding:.45rem .7rem; border-radius:10px;
  border:1px solid #233241; background:#0a0f13; color:#cfe9ff; text-decoration:none;
  font:700 12px/1 var(--family); letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .25s, transform .25s;
}
#cr-hero.is-revealed #cr-secret{ opacity:1; transform:none; pointer-events:auto }
#cr-secret:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }

/* ===== Content (no bg; page bg is black) ===== */
#cr-content{ background:transparent }
#cr-notice{ padding:32px clamp(16px,8vw,96px) 72px; text-align:center }
#cr-notice p{ margin:0; color:var(--muted); font-size:clamp(16px,1.6vw,20px); letter-spacing:.02em }

/* Footer */
footer{ padding:12px clamp(12px,8vw,24px) 28px; color:#9ca3af; font-size:12px }

/* Reduced motion: use single JPG, no animation */
@media (prefers-reduced-motion: reduce){
  .cr-base,.cr-overlay{ display:none !important }
  .cr-fallback{ opacity:1 !important }
}