/* ==========================================================================
   stop&loss — 메인 히어로 (Isotope Hero) 전용 스타일

   index.html 하나만 이 파일을 싣는다. 모든 클래스에 iso- 접두사를 붙여
   공용 style.css · 관리자 화면과 충돌할 자리를 없앴다 — 여기를 통째로 지워도
   다른 페이지는 픽셀 하나 안 바뀐다.

   구조 (index.html 의 .iso-hero 섹션)
     .iso-stage  — 셰이더 캔버스. 배경으로 깔리고 포인터 이벤트를 막지 않는다.
     .iso-scrim  — 아래 28% 만 덮는 가독성 그라데이션. 헤드라인이 있는 중앙까지
                   끌어올리면 셰이더 화면이 통째로 어두워지므로 높이를 못박는다.
     .iso-copy   — 하단 카피(제목 · 보조 문장 · CTA 두 개).

   헤드라인은 두 벌이다
     셰이더 안 Text 레이어(넓은 화면)와 아래 .iso-h1(좁은 화면 · 폴백)이 같은
     문구를 든다. hero.js 가 'WebGPU 있음 + 640px 이상'일 때 .iso-shader-headline
     클래스를 달아 h1 을 시각적으로 숨긴다(스크린 리더에는 남긴다). JS 나 WebGPU 가
     없으면 클래스가 안 붙으므로 h1 이 그대로 보인다 — 기본값이 '보임'이어야
     어떤 실패에서도 화면이 비지 않는다.

     첫 프레임(onReady)이 아니라 WebGPU 확인 시점에 거는 이유는, 기다리면 로딩
     동안 같은 글자가 하단에 크게 떴다가 셰이더가 켜지는 순간 사라지고 화면 중앙에
     다시 나타나기 때문이다. 셰이더가 실패하면 hero.js 가 클래스를 도로 걷는다.
   ========================================================================== */

.iso-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 홈 헤더는 투명하다(style.css 의 body[data-page="home"] 규칙). 히어로가 화면
     전체를 차지하고 헤더 높이만큼 위로 파고들어, 셰이더 캔버스가 헤더 '뒤'까지
     이어진다 — 레퍼런스(shaders.com)와 같은 구조다. 문서 전체 높이는
     헤더 + (100dvh − 헤더) = 100dvh 그대로라 스크롤은 생기지 않는다. */
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--header-h));
  background: #040407;
  color: #fff;
  /* Geist 는 히어로 전용. 로드 전 · 실패 시엔 사이트 기본 글꼴로 물러난다. */
  font-family: 'Geist', var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 셰이더 캔버스 ---------- */

.iso-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/*
 * 캔버스는 부모(.iso-stage)를 그대로 채운다. 창 크기가 바뀌면 이 두 줄 덕에
 * 캔버스 상자도 함께 바뀌고, 그 변화를 셰이더 번들의 ResizeObserver 가 보고
 * 그리기 버퍼를 다시 잡는다.
 *
 * 같은 100% 를 hero.js 의 keepCanvasFluid 가 인라인으로 한 번 더 적는다.
 * 중복이 아니라 필수다 — 번들이 createShader 첫 줄에서 style.width 가 비어 있으면
 * 픽셀 크기를 박아 넣고, 인라인 style 은 이 규칙을 이기기 때문이다. 그 순간
 * 캔버스가 '페이지를 연 시점의 창 크기'에 굳는다(hero.js 의 그 함수 주석 참조).
 * 그러니 여기 두 줄도, 저기 두 줄도 지우지 말 것.
 */
.iso-canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* 첫 프레임이 나오기 전의 빈 사각형을 숨긴다. hero.js 의 onReady 가
     .iso-shader-on 을 달아 줘야 드러난다. */
  opacity: 0;
  transition: opacity 0.8s ease;
}

.iso-hero.iso-shader-on .iso-canvas { opacity: 1; }

/* ---------- 하단 가독성 스크림 ---------- */

.iso-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 50%, transparent);
}

/* ---------- 카피 ---------- */

.iso-copy {
  position: relative;
  z-index: 10;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 140px 24px 48px;
}

.iso-h1 { margin-bottom: 20px; }

.iso-kicker {
  display: block;
  font-size: 20px;
  letter-spacing: -.025em;
  color: rgba(255, 255, 255, .75);
}

.iso-word {
  display: block;
  /* 'STOP&LOSS' 는 대문자 9자다. 고정 72px 이면 360px 화면에서 넘치므로
     뷰포트에 따라 줄인다 — 360px 에서 약 47px, 넓은 화면에서 72px. */
  font-size: clamp(38px, 13vw, 72px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.04em;
  color: #fff;
}

/* 셰이더가 헤드라인을 대신 그리는 동안 h1 은 스크린 리더 전용으로 접는다.
   display:none 이 아닌 클립 방식이라 검색엔진 · 보조기기에는 그대로 남는다. */
.iso-hero.iso-shader-headline .iso-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.iso-sub {
  max-width: 42rem;
  font-size: 16px;
  line-height: 1.625;
  text-wrap: pretty;
  color: rgba(255, 255, 255, .55);
}

.iso-sub b {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
}

/* ---------- CTA ---------- */

.iso-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.iso-cta {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 28px;
  border-radius: 9999px;
  font-size: 14px;
}

.iso-cta-primary {
  gap: 10px;
  background: #fff;
  color: #0a0a12;
  font-weight: 600;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 살짝 떠오르며 좌우로 다른 색이 번지는 이중 글로우 — 렌즈 색분산과 짝이 되는 색이다. */
.iso-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 6px 2px 28px rgba(255, 45, 92, .4), -6px -2px 28px rgba(61, 233, 255, .35);
}

.iso-cta-arrow {
  flex: 0 0 auto;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.iso-cta-primary:hover .iso-cta-arrow { transform: translateX(3px); }

.iso-cta-secondary {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .8);
  font-weight: 500;
  backdrop-filter: blur(4px);
  transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.iso-cta-secondary:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.iso-hero a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 4px;
}

/* 렌즈 색분산과 같은 계열의 선택 색. 히어로 안에서만 쓴다. */
.iso-hero ::selection {
  background: rgba(255, 45, 92, .9);
  color: #040407;
}

/* ---------- 등장 애니메이션 ---------- */

/* 사이트 공용 .reveal(IntersectionObserver 스크롤 등장)과 다른 물건이다.
   히어로는 첫 화면이라 관찰을 기다릴 이유가 없어 CSS 애니메이션으로 바로 띄운다. */
.iso-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: iso-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--iso-delay, 0s);
}

/* 지연은 인라인 style 이 아니라 클래스로 준다 — 이 사이트의 CSP 는
   style 속성('unsafe-inline')을 허용하지 않는다. */
.iso-d1 { --iso-delay: 0.1s; }
.iso-d2 { --iso-delay: 0.2s; }
.iso-d3 { --iso-delay: 0.36s; }

@keyframes iso-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 반응형 ---------- */

@media (min-width: 640px) {
  .iso-copy {
    padding-inline: 48px;
    padding-bottom: 64px;
  }

  .iso-sub { font-size: 18px; }
}

/* ---------- 모션 최소화 ---------- */

/* 셰이더는 모션 최소화에서도 돈다(hero.js 상단 주석 참조 — 성능 최적화로 창
   애니메이션을 꺼 둔 Windows PC 가 전부 reduce 로 보고되기 때문). 원본 스펙대로
   여기서는 DOM 쪽 등장 애니메이션과 전환만 꺼서 완성된 화면이 즉시 선다. */
@media (prefers-reduced-motion: reduce) {
  .iso-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .iso-canvas,
  .iso-cta-primary,
  .iso-cta-arrow,
  .iso-cta-secondary { transition: none; }
}