/* Vèliscos — coming soon. Dark campaign pairing: Deep Green + Cream + Gold. */

:root{
  --green:#1F3A2E;
  --green-deep:#162922;
  --cream:#FBF9F4;
  --ivory:#FAF9F5;
  --charcoal:#1A1A1A;
  --gold:#A9855D;
  --gold-soft:rgba(169,133,93,0.45);
  --cream-soft:rgba(251,249,244,0.72);
  --cream-faint:rgba(251,249,244,0.4);

  --display:'Didot','Playfair Display',Georgia,serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --max:1280px;
  --side:64px;
}

@media (max-width:720px){
  :root{ --side:22px; }
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--green);
  color:var(--cream);
}

body{
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  padding-bottom:52px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--gold);
  color:var(--green);
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- ambient texture ---------- */

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-flicker 1.4s steps(8) infinite;
}

@keyframes grain-flicker{
  0%,100%{ background-position:0 0; }
  10%{ background-position:-5% -10%; }
  20%{ background-position:-15% 5%; }
  30%{ background-position:7% -15%; }
  40%{ background-position:-10% 15%; }
  50%{ background-position:15% -5%; }
  60%{ background-position:-7% 10%; }
  70%{ background-position:10% -8%; }
  80%{ background-position:-12% -3%; }
  90%{ background-position:5% 12%; }
}

.spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(600px circle at var(--x,50%) var(--y,30%), rgba(251,249,244,0.06), transparent 60%);
  transition:background 0.2s ease;
}

@media (max-width:720px){
  .spotlight{ display:none; }
}

/* ---------- corner ticks ---------- */

.corner-ticks{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.tick{
  position:absolute;
  width:14px;
  height:14px;
  opacity:0;
  animation:tick-in 1.2s ease forwards;
  animation-delay:1.3s;
}

.tick--tl{ top:24px; left:24px; border-top:1px solid var(--gold-soft); border-left:1px solid var(--gold-soft); }
.tick--tr{ top:24px; right:24px; border-top:1px solid var(--gold-soft); border-right:1px solid var(--gold-soft); }
.tick--bl{ bottom:80px; left:24px; border-bottom:1px solid var(--gold-soft); border-left:1px solid var(--gold-soft); }
.tick--br{ bottom:80px; right:24px; border-bottom:1px solid var(--gold-soft); border-right:1px solid var(--gold-soft); }

@keyframes tick-in{
  to{ opacity:0.55; }
}

@media (max-width:720px){
  .tick{ width:10px; height:10px; }
  .tick--tl,.tick--tr{ top:16px; }
  .tick--bl,.tick--br{ bottom:68px; }
  .tick--tl,.tick--bl{ left:16px; }
  .tick--tr,.tick--br{ right:16px; }
}

/* ---------- topbar ---------- */

.topbar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:var(--max);
  margin:0 auto;
  padding:32px var(--side) 0;
}

@media (max-width:720px){
  .topbar{ padding-top:22px; }
}

.topbar__mark img{
  display:block;
  border-radius:50%;
  opacity:0.92;
  transition:opacity 0.25s ease;
}

.topbar__mark img:hover{
  opacity:1;
}

.topbar__eyebrow{
  margin:0;
  font-family:var(--body);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--gold);
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:480px){
  .topbar__eyebrow{ font-size:9px; letter-spacing:0.05em; }
}

@media (max-width:360px){
  .topbar__eyebrow{ font-size:8px; letter-spacing:0.02em; }
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  z-index:3;
  max-width:840px;
  margin:0 auto;
  padding:96px var(--side) 96px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media (max-width:720px){
  .hero{ padding:72px var(--side) 72px; }
}

.hero__aperture{
  position:absolute;
  top:36%;
  left:50%;
  transform:translate(-50%,-50%);
  width:640px;
  height:640px;
  pointer-events:none;
  z-index:-1;
}

.ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--gold-soft);
  opacity:0.35;
}

.ring--1{
  animation:spin 60s linear infinite;
}

.ring--2{
  inset:70px;
  border-color:rgba(251,249,244,0.12);
  animation:spin 90s linear infinite reverse;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.scan-line{
  position:absolute;
  left:0;
  right:0;
  top:6%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:0;
  pointer-events:none;
  animation:scan-sweep 2.4s ease-in-out forwards;
  animation-delay:1.5s;
}

@keyframes scan-sweep{
  0%{ opacity:0; top:6%; }
  15%{ opacity:0.75; }
  85%{ opacity:0.75; }
  100%{ opacity:0; top:74%; }
}

.eyebrow{
  margin:0 0 28px;
  font-family:var(--body);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--gold);
  text-transform:uppercase;
}

.wordmark{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(48px,7vw,72px);
  line-height:1;
  color:var(--cream);
  letter-spacing:0.01em;
}

@media (max-width:400px){
  .wordmark{ font-size:13vw; }
}

.rule{
  width:64px;
  height:1px;
  background:var(--gold);
  margin:36px 0;
  transform-origin:center;
}

.headline{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(28px,4vw,40px);
  color:var(--cream);
  line-height:1.15;
}

.subline{
  margin:14px 0 0;
  font-family:var(--body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
}

.body-copy{
  max-width:480px;
  margin:32px 0 0;
  font-size:16px;
  line-height:1.65;
  color:var(--cream-soft);
}

/* ---------- form ---------- */

.notify{
  display:flex;
  gap:12px;
  margin:44px 0 0;
  width:100%;
  max-width:420px;
}

@media (max-width:520px){
  .notify{ flex-direction:column; }
}

.notify__input{
  flex:1;
  height:48px;
  padding:0 18px;
  background:transparent;
  border:1px solid rgba(251,249,244,0.28);
  color:var(--cream);
  font-family:var(--body);
  font-size:14px;
  border-radius:1px;
  outline:none;
  transition:border-color 0.2s ease;
}

.notify__input::placeholder{
  color:var(--cream-faint);
}

.notify__input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(169,133,93,0.22);
}

.notify__button{
  position:relative;
  height:48px;
  padding:0 28px;
  background:var(--cream);
  color:var(--green);
  border:1px solid var(--cream);
  font-family:var(--body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:1px;
  cursor:pointer;
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease;
  white-space:nowrap;
}

.notify__button:hover{
  background:transparent;
  color:var(--cream);
  border-color:var(--cream);
}

.notify__button:active:not(:disabled){
  transform:scale(0.98);
}

.notify__button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.notify__button:disabled{
  opacity:0.6;
  cursor:default;
}

.btn-spinner{
  display:none;
}

.notify__button.is-loading .btn-label{
  visibility:hidden;
}

.notify__button.is-loading .btn-spinner{
  display:block;
  position:absolute;
  top:50%;left:50%;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border:1.5px solid rgba(31,58,46,0.3);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}

.notify__status{
  min-height:20px;
  margin:14px 0 0;
  font-size:13px;
  color:var(--gold);
}

.notify__status[data-state="error"]{
  color:#c98a7a;
}

/* ---------- ticker ---------- */

.ticker{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10;
  border-top:1px solid rgba(251,249,244,0.12);
  overflow:hidden;
  padding:14px 0;
  background:var(--green-deep);
}

.ticker__track{
  display:inline-flex;
  white-space:nowrap;
  animation:ticker 34s linear infinite;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  color:var(--cream-faint);
}

.ticker__track span{
  padding:0 4px;
}

.tk-dot{
  color:var(--gold);
}

@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- footer ---------- */

.footer{
  position:relative;
  z-index:3;
  text-align:center;
  padding:28px var(--side) 40px;
}

.footer p{
  margin:0;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--cream-faint);
}

/* ---------- reveal-on-load ---------- */

.reveal{
  opacity:0;
  transform:translateY(16px);
  animation:rise 0.9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--d) * 110ms + 120ms);
}

@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

.rule.reveal{
  animation:
    rule-in 0.9s cubic-bezier(.16,1,.3,1) calc(var(--d) * 110ms + 120ms) forwards,
    rule-glow 3.4s ease-in-out calc(var(--d) * 110ms + 1020ms) infinite;
}

@keyframes rule-in{
  from{ opacity:0; transform:scaleX(0); }
  to{ opacity:1; transform:scaleX(1); }
}

@keyframes rule-glow{
  0%,100%{ box-shadow:0 0 0 rgba(169,133,93,0); opacity:1; }
  50%{ box-shadow:0 0 8px rgba(169,133,93,0.65); opacity:0.85; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  .ring,.ticker__track,.grain,.scan-line{ animation:none; }
  .rule.reveal{ animation:none; opacity:1; transform:none; }
  .tick{ animation:none; opacity:0.55; }
  .scan-line{ display:none; }
  .spotlight{ display:none; }
}