/* ================================================================
   HAMTIV — Base
   ================================================================ */

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

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text-100);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; cursor:none; }
button { cursor:none; border:none; background:none; font:inherit; }
ul, ol { list-style:none; }

/* ── Custom Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--crimson);
  border-radius: var(--r-pill);
}

/* ── Selection ────────────────────────────────────────── */
::selection { background: var(--crimson); color:#fff; }

/* ── Focus ────────────────────────────────────────────── */
:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Container ────────────────────────────────────────── */
.container {
  width:100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Noise grain overlay ──────────────────────────────── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px;
  pointer-events:none;
  z-index:0;
  opacity:0.55;
}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes glow {
  0%,100% { opacity:0.6; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.1); }
}

@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}

@keyframes liquidBlob {
  0%,100% { border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%     { border-radius:30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%     { border-radius:50% 60% 30% 70% / 30% 40% 60% 70%; }
  75%     { border-radius:40% 60% 50% 30% / 40% 50% 60% 50%; }
}

@keyframes particleRise {
  0%   { transform:translateY(100vh) rotate(0deg); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:0.7; }
  100% { transform:translateY(-40px) rotate(720deg); opacity:0; }
}

@keyframes scrollLine {
  0%   { transform:scaleY(0); transform-origin:top; }
  50%  { transform:scaleY(1); transform-origin:top; }
  51%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}

@keyframes shimmerSweep {
  0%   { background-position:-400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes cursorPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50%      { transform:translate(-50%,-50%) scale(1.3); }
}

/* ── Reveal animation classes ─────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity:1; transform:none; }

.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.45s; }

/* ── Section tag ──────────────────────────────────────── */
.section-tag {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family: var(--font-ui);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.section-tag::before,
.section-tag::after {
  content:'';
  width:36px;
  height:1px;
  background: var(--gold);
  opacity:0.5;
}

/* ── Section title ────────────────────────────────────── */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.02em;
}
.section-title span { color: var(--crimson); font-style:italic; }

/* ── Divider line ─────────────────────────────────────── */
.divider {
  width:60px;
  height:2px;
  background:linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius:2px;
  margin:1.5rem 0;
}

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family: var(--font-ui);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
  background: var(--crimson);
  padding:0.9rem 2.2rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-glow-c);
  transition: var(--t);
  position:relative;
  overflow:hidden;
  cursor:none;
}
.btn-primary::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%);
  pointer-events:none;
}
.btn-primary:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 60px rgba(196,35,72,0.6), 0 0 120px rgba(196,35,72,0.2), var(--shadow-3d);
}

.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family: var(--font-ui);
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--gold);
  border:1px solid var(--border-gold);
  padding:0.9rem 2rem;
  border-radius: var(--r-sm);
  background:rgba(244,163,26,0.04);
  backdrop-filter:blur(8px);
  transition: var(--t);
  cursor:none;
}
.btn-secondary:hover {
  background: var(--gold);
  color: var(--void);
  box-shadow: var(--shadow-glow-g);
  transform:translateY(-2px);
}

/* ── Visually hidden ──────────────────────────────────── */
.sr-only {
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}