/*
 * IHK Studio — Coming Soon  /  assets/css/main.css
 * ─────────────────────────────────────────────────
 * ✏️ Para cambiar colores principales, edita las variables en :root
 */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:       #0f0d0b;
  --surface:  rgba(20, 17, 13, 0.65);
  --border:   rgba(201, 162, 78, 0.22);

  /* ✏️ Acento dorado — cámbialo si quieres otro color de marca */
  --gold:     #c9a24e;
  --gold-lt:  #f0d99a;
  --gold-dk:  #9a7838;

  /* ✏️ Glow del logo — actualmente rojo tinta */
  --red-a:    rgba(192, 57, 43, 0.80);
  --red-b:    rgba(192, 57, 43, 0.42);
  --red-c:    rgba(192, 57, 43, 0.18);

  --cream:    #f4efe6;
  --muted:    #b0a090;
  --muted-lt: #cec0b0;

  --f-urban:  'Bebas Neue', sans-serif;
  --f-body:   'Cormorant Garamond', serif;

  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease-s: cubic-bezier(.4, 0, .2, 1);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-body);
  min-height: 100dvh;
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ─────────────────────────────────────────── */
.cursor {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: left, top;
}

.cursor-ring {
  position: fixed;
  width: 28px; height: 28px;
  border: 1px solid rgba(201, 162, 78, .4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* ── FONDO JAPONÉS (irezumi) ────────────────────────
 *
 * ✏️ PARA CAMBIAR LA IMAGEN DE FONDO:
 *    Reemplaza la URL dentro de url('...') en .jp-bg::before
 *    con la URL de tu imagen o una ruta local:
 *    Ejemplo local  → url('../img/mi-fondo.jpg')
 *    Ejemplo online → url('https://ejemplo.com/foto.jpg')
 *
 *    Parámetros Unsplash disponibles: w=ancho, q=calidad(1-100)
 *
 * ✏️ PARA AJUSTAR LA OPACIDAD / BRILLO del fondo:
 *    Modifica los valores en filter: brightness() y opacity en ::before
 *    Mayor brightness = más claro. Mayor opacity = más visible.
 * ─────────────────────────────────────────────────── */
.jp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Imagen irezumi — dragón japonés / koi / flores de cerezo tatuaje */
.jp-bg::before {
  content: '';
  position: absolute;
  inset: 0;

  /* ✏️ URL de la imagen de fondo */
  background:
  url('../../assets/img/fondo1.jpg')
    center / cover no-repeat;

  /* ✏️ Ajusta brightness (claridad) y opacity (visibilidad) */
  filter: sepia(20%) contrast(1.08) brightness(0.90) saturate(0.85);
  opacity: 0.75;

  transform: scale(1.04);
  animation: drift 45s ease-in-out infinite alternate;
}

/* Viñeta suave — centro abierto, bordes oscurecidos */
.jp-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 48%,
      rgba(15, 13, 11, 0.15)  0%,
      rgba(15, 13, 11, 0.58) 58%,
      rgba(15, 13, 11, 0.90) 100%),
    linear-gradient(to bottom,
      rgba(15, 13, 11, 0.75)  0%,
      transparent 22%,
      transparent 76%,
      rgba(15, 13, 11, 0.82) 100%);
}

@keyframes drift {
  from { transform: scale(1.04) translate(0,   0); }
  to   { transform: scale(1.08) translate(-1%, 1.5%); }
}

/* ── GRAIN ──────────────────────────────────────────── */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .18;
  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.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── ESQUINAS ───────────────────────────────────────── */
.corner {
  position: fixed;
  width: 16px; height: 16px;
  pointer-events: none;
  z-index: 3;
}
.corner::before, .corner::after {
  content: '';
  position: absolute;
  background: rgba(201, 162, 78, .5);
}
.corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.corner::after  { width: 1px; height: 100%; top: 0; left: 0; }
.corner.tl { top: 14px;    left: 14px; }
.corner.tr { top: 14px;    right: 14px;  transform: scaleX(-1); }
.corner.bl { bottom: 14px; left: 14px;   transform: scaleY(-1); }
.corner.br { bottom: 14px; right: 14px;  transform: scale(-1); }

/* ✏️ Dominio mostrado como sello lateral */
.url-stamp {
  position: fixed;
  right: 44px; bottom: 16px;
  font-family: var(--f-urban);
  font-size: 9px;
  letter-spacing: .45em;
  color: var(--gold-dk);
  opacity: .5;
  writing-mode: vertical-rl;
  z-index: 4;
  pointer-events: none;
}

/* ── STAGE ──────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
  gap: 0;
}

/* Animación de entrada compartida */
.logo-wrap,
.headline-wrap,
.tagline,
.divider,
.countdown,
.progress-wrap,
.notify-wrap,
.socials {
  animation: fadeUp .8s var(--ease) both;
  opacity: 0;
}

/* ── LOGO ─────────────────────────────────────────────
 * ✏️ Tamaño del logo: cambia clamp(min, preferido, max)
 * ✏️ Glow: modifica --red-a/b/c en :root
 * ─────────────────────────────────────────────────── */
.logo-wrap { margin-bottom: 20px; }

.logo-img {
  display: block;
  margin: 0 auto;
  width: clamp(88px, 14vw, 116px);
  height: auto;
  filter:
    drop-shadow(0 0  7px var(--red-a))
    drop-shadow(0 0 22px var(--red-b))
    drop-shadow(0 0 44px var(--red-c));
  transition: filter .5s var(--ease-s);
}

.logo-img:hover {
  filter:
    drop-shadow(0 0 10px rgba(192,57,43,.95))
    drop-shadow(0 0 30px rgba(192,57,43,.55))
    drop-shadow(0 0 60px rgba(192,57,43,.25));
}

.logo-sub {
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: .55em;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  text-transform: uppercase;
}

/* ── HEADLINE ─────────────────────────────────────────
 * ✏️ Tamaño del titular: ajusta clamp() en font-size de h1
 *    Ejemplo más grande: clamp(52px, 12vw, 130px)
 *    Ejemplo más pequeño: clamp(32px, 6vw, 68px)
 * ─────────────────────────────────────────────────── */
.headline-wrap { text-align: center; margin-bottom: 8px; }

.pre-title {
  display: block;
  font-family: var(--f-urban);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: .7em;
  color: var(--gold);
  margin-bottom: 6px;
  opacity: .9;
}

/* ✏️ Tamaño del "COMING SOON" — edita aquí */
h1 {
  font-family: var(--f-urban);
  font-size: clamp(36px, 7.5vw, 80px);
  line-height: .92;
  letter-spacing: .04em;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}

/* "Soon" en outline dorado */
h1 em {
  font-style: normal;
  -webkit-text-stroke: 1.5px var(--gold);
  color: transparent;
}

/* ── TAGLINE ────────────────────────────────────────── */
/* ✏️ Edita el texto tagline directamente en index.html */
.tagline {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--muted-lt);
  letter-spacing: .07em;
  margin-bottom: 24px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.tagline .accent { color: var(--gold-lt); font-style: normal; }

/* ── DIVIDER ────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 24px;
}

.divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.divider .diamond {
  width: 18px; height: 18px;
  border: 1px solid rgba(201,162,78,.35);
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 6px;
}

/* ── COUNTDOWN ──────────────────────────────────────── */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.8vw, 18px);
  margin-bottom: 24px;
}

.unit { display: flex; flex-direction: column; align-items: center; }

.box {
  width: clamp(54px, 9.5vw, 80px);
  height: clamp(54px, 9.5vw, 80px);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s;
}

/* Reflejo interior — da volumen al glassmorphism */
.box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Línea dorada en hover */
.box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s;
}

.unit:hover .box               { border-color: rgba(201,162,78,.4); }
.unit:hover .box::after        { opacity: 1; }

.num {
  font-family: var(--f-urban);
  font-size: clamp(22px, 4.5vw, 40px);
  color: var(--cream);
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: color .22s;
}

.unit.tick .num {
  color: var(--gold-lt);
  text-shadow: 0 0 12px rgba(201,162,78,.45);
}

.lbl {
  font-family: var(--f-body);
  font-size: 8px;
  letter-spacing: .42em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}

.sep {
  font-family: var(--f-urban);
  font-size: clamp(18px, 3.5vw, 34px);
  color: var(--gold-dk);
  opacity: .45;
  padding-top: clamp(10px, 1.8vw, 18px);
  line-height: 1;
}

/* Flip animation del número */
@keyframes flipNum {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-5px); }
  60%  { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.num.flip { animation: flipNum .28s ease both; }

/* ── PROGRESS ───────────────────────────────────────── */
.progress-wrap {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 24px;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 7px;
}

.progress-track {
  height: 1px;
  background: rgba(255,255,255,.08);
  position: relative;
  overflow: visible;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold), var(--gold-lt));
  transition: width 1.2s var(--ease-s);
  position: relative;
  box-shadow: 0 0 5px rgba(201,162,78,.25);
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  background: var(--gold-lt);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
}

/* ── NOTIFY FORM ────────────────────────────────────── */
.notify-wrap {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 24px;
}

.notify-lbl {
  display: block;
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: .44em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}

.notify-form {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s;
}

.notify-form:focus-within { border-color: rgba(201,162,78,.48); }

.notify-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--cream);
  letter-spacing: .03em;
}

.notify-form input::placeholder { color: var(--muted); }

.notify-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  padding: 11px 16px;
  cursor: none;
  color: var(--gold);
  font-family: var(--f-urban);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .22s, color .22s;
  white-space: nowrap;
}

.notify-btn:hover { background: var(--gold); color: var(--bg); }

.notify-ok {
  text-align: center;
  font-family: var(--f-body);
  font-style: italic;
  color: var(--gold-lt);
  font-size: 12px;
  letter-spacing: .05em;
  margin-top: 8px;
  opacity: 0;
  transition: opacity .5s;
}
.notify-ok.show { opacity: 1; }

/* ── REDES SOCIALES ─────────────────────────────────── */
.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.social {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .22s, color .22s, background .22s;
}

.social:hover {
  border-color: rgba(201,162,78,.45);
  color: var(--gold-lt);
  background: rgba(201,162,78,.07);
}

.social svg { width: 12px; height: 12px; }

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

@keyframes drift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, 1.5%); }
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 480px) {
  .url-stamp { display: none; }
  .sep       { display: none; }
  h1         { font-size: clamp(34px, 14vw, 62px); }
  .stage     { padding: 40px 16px 56px; }
}

/* ── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .jp-bg::before { animation: none; }
}