/* ==========================================================================
   Isira — Coming Soon
   Palette (sampled from reference design):
   --bg-a   #C4A38A  (warm shadow beige, top-left)
   --bg-b   #EED7C4  (light champagne, top-right / highlights)
   --bg-c   #D3B59F  (mid tone)
   --copper-deep   #5C2408  (headline / countdown numbers)
   --copper-mid    #7A3A16  (sub headings)
   --copper-btn    #8C3F16  (button fill)
   --brown-soft    #6B4A34  (eyebrow / labels)
   --line          #E3CFC0  (hairlines / input border)
   --logo-hi   #FEA12C  (logo metallic highlight)
   --logo-lo   #C34E12  (logo metallic shadow)
   ========================================================================== */

:root{
  --bg-a:#cdae95;
  --bg-b:#f1ddce;
  --bg-c:#ddc6b1;
  --bg-d:#ecdac8;

  --copper-deep:#5c2408;
  --copper-mid:#743914;
  --copper-btn:#8c3f16;
  --copper-btn-hover:#742f0f;
  --brown-soft:#6b4a34;
  --brown-faint:#8a6a54;
  --line:#e3cfc0;
  --line-soft:rgba(92,36,8,0.18);

  --logo-hi:#feb95c;
  --logo-lo:#a83f0f;

  --font-display:'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--copper-deep);
  background:#e2c9b2;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------------------------------------------------------------------- */
/* Page background                                                        */
/* ---------------------------------------------------------------------- */

.page{
  position:relative;
  min-height:100vh;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 78% 6%, var(--bg-b) 0%, rgba(238,215,196,0) 55%),
    radial-gradient(ellipse 70% 55% at 15% 8%, rgba(238,215,196,0.55) 0%, rgba(238,215,196,0) 60%),
    linear-gradient(150deg, var(--bg-a) 0%, var(--bg-d) 38%, var(--bg-b) 62%, var(--bg-c) 100%);
  isolation:isolate;
}

.bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}
.bg-glow--1{
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  top:2%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,214,168,0.55) 0%, rgba(255,214,168,0) 70%);
}
.bg-glow--2{
  width:45vw; height:45vw; max-width:600px; max-height:600px;
  top:8%; right:2%;
  background:radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
}

.bg-streaks{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 2px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 90px
    );
  mix-blend-mode:overlay;
  opacity:.7;
}

.bg-noise{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.content-wrap{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding: clamp(20px,4vw,48px) clamp(20px,6vw,64px) clamp(40px,6vw,72px);
}

/* ---------------------------------------------------------------------- */
/* Top eyebrow row                                                        */
/* ---------------------------------------------------------------------- */

.top-row{
  padding-top: clamp(8px, 2vw, 20px);
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .22em;
  text-transform:uppercase;
  color:var(--brown-soft);
}

/* ---------------------------------------------------------------------- */
/* 3D rotating logo                                                       */
/* ---------------------------------------------------------------------- */

.logo-stage{
  display:flex;
  justify-content:center;
  margin: clamp(6px,2vw,10px) auto clamp(6px,2vw,14px);
}

.logo-scene{
  position:relative;
  width:min(62vw, 500px);
  aspect-ratio: 1 / 0.93;
  perspective: 1000px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-tilt{
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation: bob 4.5s ease-in-out infinite;
  will-change:transform;
}

.logo-spin{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation: spinY 7s linear infinite;
  will-change:transform;
}

.logo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 2px 10px rgba(140,63,22,0.25))
    drop-shadow(0 18px 30px rgba(92,36,8,0.18));
  backface-visibility: visible;
  user-select:none;
  pointer-events:none;
}

/* thin vertical "edge" that catches the light as the emblem turns side-on,
   selling the sideways 3D turn the way the reference video does */
.logo-edge{
  position:absolute;
  top:8%;
  bottom:8%;
  left:50%;
  width:10px;
  margin-left:-5px;
  border-radius:6px;
  background:linear-gradient(180deg, #ffd9a0 0%, #feb24a 20%, #8c3f16 50%, #feb24a 80%, #ffd9a0 100%);
  box-shadow: 0 0 18px rgba(254,161,44,0.65);
  transform: rotateY(90deg);
  opacity:0;
  animation: edgeShow 7s linear infinite;
  pointer-events:none;
}

@keyframes spinY{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(360deg); }
}

@keyframes edgeShow{
  0%{ opacity:0; }
  23%{ opacity:0; }
  25%{ opacity:1; }
  27%{ opacity:0; }
  73%{ opacity:0; }
  75%{ opacity:1; }
  77%{ opacity:0; }
  100%{ opacity:0; }
}

@keyframes bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3%); }
}

.logo-reflection{
  position:absolute;
  left:50%;
  bottom:-6%;
  transform:translateX(-50%);
  width:70%;
  height:26%;
  background:radial-gradient(ellipse at center, rgba(200,110,40,0.30) 0%, rgba(200,110,40,0.12) 45%, rgba(200,110,40,0) 75%);
  filter:blur(2px);
  border-radius:50%;
  animation: reflectPulse 7s linear infinite;
  pointer-events:none;
}

@keyframes reflectPulse{
  0%, 100%{ opacity:.55; transform:translateX(-50%) scaleX(1); }
  25%{ opacity:.75; transform:translateX(-50%) scaleX(.82); }
  50%{ opacity:.55; transform:translateX(-50%) scaleX(1); }
  75%{ opacity:.75; transform:translateX(-50%) scaleX(.82); }
}

.logo-ground-glow{
  position:absolute;
  left:50%;
  bottom:-2%;
  transform:translateX(-50%);
  width:36%;
  height:14%;
  background:radial-gradient(ellipse at center, rgba(254,161,44,0.55) 0%, rgba(254,161,44,0) 70%);
  filter:blur(10px);
  pointer-events:none;
  animation: glowFlicker 3.4s ease-in-out infinite;
}

@keyframes glowFlicker{
  0%,100%{ opacity:.75; }
  50%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .logo-tilt, .logo-spin, .logo-edge, .logo-reflection, .logo-ground-glow{
    animation: none !important;
  }
  .logo-edge{ opacity:0 !important; }
}

/* ---------------------------------------------------------------------- */
/* Coming soon + countdown                                                */
/* ---------------------------------------------------------------------- */

.coming-section{
  max-width:720px;
  margin:0 auto;
}

.coming-soon{
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--copper-mid);
  margin: 6px 0 clamp(18px,3vw,28px);
}

.countdown{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(14px, 3vw, 34px);
  margin-bottom: clamp(22px,3.5vw,34px);
  flex-wrap:nowrap;
}

.count-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 56px;
}

.count-num{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(34px, 7vw, 58px);
  line-height:1;
  color:var(--copper-deep);
  font-variant-numeric: tabular-nums;
}

.count-label{
  margin-top:8px;
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brown-soft);
}

.count-divider{
  width:1px;
  height: clamp(34px, 5vw, 52px);
  background: var(--line-soft);
}

/* Diamond dividers */
.diamond-divider, .line-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: clamp(18px,3vw,28px) auto;
  max-width: 360px;
}
.diamond-divider::before, .diamond-divider::after,
.line-divider::before, .line-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line-soft);
}
.diamond-divider span{
  width:6px;height:6px;
  margin:0 14px;
  background:var(--copper-mid);
  transform:rotate(45deg);
  flex:none;
  opacity:.85;
}
.line-divider{ max-width:420px; }
.line-divider span{
  width:5px;height:5px;
  margin:0 12px;
  background:var(--copper-mid);
  transform:rotate(45deg);
  flex:none;
  opacity:.7;
}

/* ---------------------------------------------------------------------- */
/* Subscribe section                                                      */
/* ---------------------------------------------------------------------- */

.section-heading{
  font-family:var(--font-body);
  font-weight:600;
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--copper-mid);
  margin: 0 0 12px;
}

.section-sub{
  font-family:var(--font-body);
  font-weight:300;
  font-size: clamp(13.5px, 1.6vw, 16px);
  line-height:1.6;
  color:var(--brown-soft);
  margin: 0 0 clamp(20px,3vw,30px);
}

.subscribe-form{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  max-width:600px;
  margin:0 auto;
  border-radius:4px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(92,36,8,0.10);
}

.email-input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line);
  border-right:none;
  background:rgba(255,250,245,0.35);
  padding: 16px 20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  color:var(--copper-deep);
  outline:none;
  border-radius:4px 0 0 4px;
}
.email-input::placeholder{
  color:#a17c60;
  font-weight:300;
}
.email-input:focus{
  background:rgba(255,250,245,0.6);
  border-color:var(--copper-btn);
}

.subscribe-btn{
  flex:0 0 auto;
  border:none;
  background:var(--copper-btn);
  color:#fff;
  padding: 16px 30px;
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:0 4px 4px 0;
  transition: background .2s ease, transform .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.subscribe-btn:hover{ background:var(--copper-btn-hover); }
.subscribe-btn:active{ transform:scale(.98); }
.subscribe-btn .btn-check{ display:none; font-size:14px; }
.subscribe-btn.is-success .btn-check{ display:inline-block; }

.form-msg{
  min-height:20px;
  margin: 12px 0 0;
  font-size:13px;
  color:var(--copper-mid);
}

.gift-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: clamp(22px,3.5vw,30px) auto 0;
}

.gift-icon{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.35);
  color:var(--copper-mid);
  border:1px solid var(--line-soft);
}

.gift-text{
  font-size: clamp(12.5px, 1.4vw, 14.5px);
  color:var(--brown-soft);
  font-weight:300;
}

.copyright{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--brown-faint);
  margin: 0 0 16px;
  font-weight:300;
}

.social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom: clamp(10px,2vw,20px);
}

.social-link{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--copper-mid);
  border:1px solid var(--line-soft);
  text-decoration:none;
  transition: background .2s ease, transform .15s ease, color .2s ease;
}
.social-link:hover{
  background:var(--copper-btn);
  color:#fff;
  border-color:var(--copper-btn);
  transform:translateY(-2px);
}

/* ---------------------------------------------------------------------- */
/* Responsive tuning                                                      */
/* ---------------------------------------------------------------------- */

@media (max-width: 767.98px){
  .top-row{
    padding-top:2px;
  }
  .eyebrow{ font-size:10px; letter-spacing:.16em; }

  .logo-scene{ width:min(72vw, 340px); }

  .countdown{ gap: 10px; }
  .count-block{ min-width:44px; }
  .count-divider{ height:30px; }

  .subscribe-form{
    flex-direction:column;
    box-shadow:none;
  }
  .email-input{
    border-right:1px solid var(--line);
    border-bottom:none;
    border-radius:4px 4px 0 0;
    text-align:center;
  }
  .subscribe-btn{
    border-radius:0 0 4px 4px;
    padding:14px 20px;
  }
  .gift-row{ padding:0 10px; }
}

@media (max-width: 420px){
  .countdown{ gap:6px; }
  .count-num{ font-size: 30px; }
  .count-label{ font-size:8px; letter-spacing:.18em; }
  .count-block{ min-width:38px; }
}

@media (min-width: 1400px){
  .content-wrap{ max-width:1280px; }
}