/*
Theme Name: Sannu
Theme URI: https://zaurhe.com
Author: Zaurhe
Author URI: https://zaurhe.com
Description: Sannu — a sophisticated, interactive "coming soon" theme built for the Zaurhe luxury home & lifestyle brand. Features an animated Hausa aska-biyu motif, an editable countdown, banner image support, and full Pagelayer compatibility. "Sannu" is a Hausa welcome — the threshold before the door opens.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sannu
Tags: coming-soon, landing-page, luxury, full-width-template, custom-colors, custom-logo, editor-style, threshold
*/

/* ============================================================
   SANNU — Design Tokens
   ============================================================ */
:root{
  --gold:        #D1A542;
  --gold-light:  #EBCF86;
  --gold-deep:   #9C7A2E;
  --gold-faint:  rgba(209,165,66,.14);
  --gold-line:   rgba(209,165,66,.22);

  --bg:          #0B0908;
  --bg-2:        #14110C;
  --bg-3:        #1C170F;
  --ink:         #EDE6D6;
  --ink-dim:     rgba(237,230,214,.62);
  --ink-faint:   rgba(237,230,214,.30);

  --serif:  "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:   "Jost", "Century Gothic", system-ui, sans-serif;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* Custom luxe cursor accent dot (pointer fine devices only) */
@media (pointer:fine){
  .sannu-cursor{
    position:fixed; top:0; left:0; width:30px; height:30px;
    border:1px solid var(--gold-line); border-radius:50%;
    transform:translate(-50%,-50%); pointer-events:none; z-index:9999;
    transition:width .35s var(--ease), height .35s var(--ease),
               border-color .35s var(--ease), background .35s var(--ease);
    mix-blend-mode:screen;
  }
  .sannu-cursor.is-active{ width:54px; height:54px; border-color:var(--gold); background:var(--gold-faint); }
}

/* ============================================================
   Stage / layered background
   ============================================================ */
.sannu-stage{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

/* Banner image layer (uploaded via Customizer) */
.sannu-banner{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.8s var(--ease), transform 12s linear;
  filter:saturate(.85) contrast(1.02);
}
.sannu-stage.has-banner .sannu-banner{ opacity:.32; transform:scale(1); }

/* Atmospheric gradient veils over everything */
.sannu-veil{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(209,165,66,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.85), transparent 60%),
    linear-gradient(180deg, rgba(11,9,8,.55) 0%, rgba(11,9,8,.20) 45%, rgba(11,9,8,.85) 100%);
}
/* Fine grain texture */
.sannu-grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Aska biyu — animated motif layers
   ============================================================ */
.sannu-motif{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; animation:motif-in 2.4s var(--ease) .2s forwards;
}
.sannu-motif svg{
  width:min(118vmin,1180px); height:min(118vmin,1180px);
  will-change:transform; transform:rotate(0deg);
  animation:motif-rotate 90s linear infinite;
}
.sannu-motif .blade{
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-dasharray:1; stroke-dashoffset:1;
  opacity:.5;
  animation:blade-draw 3.6s var(--ease) forwards;
  vector-effect:non-scaling-stroke;
}
.sannu-motif .blade.b2{ animation-delay:.25s; }
.sannu-motif .blade.b3{ animation-delay:.5s; }
.sannu-motif .blade.b4{ animation-delay:.75s; }
.sannu-motif .ring{
  fill:none; stroke:var(--gold-line); stroke-width:.6;
  vector-effect:non-scaling-stroke;
}

/* faint tiling lattice */
.sannu-lattice{
  position:absolute; inset:-10%; z-index:-3; pointer-events:none;
  opacity:.05;
  background-repeat:repeat;
  background-size:140px 140px;
}

@keyframes motif-in{ to{ opacity:1; } }
@keyframes motif-rotate{ to{ transform:rotate(360deg); } }
@keyframes blade-draw{ to{ stroke-dashoffset:0; opacity:.5; } }

/* ============================================================
   Header (top bar)
   ============================================================ */
.sannu-top{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px clamp(22px,5vw,64px);
}
.sannu-top .eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:300;
}
.sannu-top .eyebrow span{ color:var(--gold); }
.sannu-rule{
  flex:1; height:1px; margin:0 clamp(14px,3vw,40px);
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

/* ============================================================
   Hero
   ============================================================ */
.sannu-hero{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:30px clamp(22px,5vw,64px) 20px;
}

.sannu-logo-wrap{
  position:relative;
  opacity:0; transform:translateY(22px);
  animation:rise 1.4s var(--ease) .35s forwards;
}
.sannu-logo-wrap img{
  width:clamp(180px,26vw,330px);
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.6));
}
/* soft halo behind logo */
.sannu-logo-wrap::before{
  content:""; position:absolute; inset:-22%; z-index:-1;
  background:radial-gradient(closest-side, rgba(209,165,66,.16), transparent 72%);
  filter:blur(6px);
}

.sannu-status{
  margin-top:34px;
  font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:14px;
  opacity:0; animation:rise 1.2s var(--ease) .7s forwards;
}
.sannu-status::before,.sannu-status::after{
  content:""; width:30px; height:1px; background:var(--gold-line);
}

.sannu-headline{
  margin:18px 0 0;
  font-weight:300; font-style:italic;
  font-size:clamp(1.9rem,5.2vw,4.1rem);
  line-height:1.06; letter-spacing:.01em;
  color:var(--ink);
  max-width:18ch;
  opacity:0; animation:rise 1.2s var(--ease) .85s forwards;
}
.sannu-headline em{ color:var(--gold-light); font-style:italic; }

.sannu-sub{
  margin:22px auto 0; max-width:46ch;
  font-size:clamp(1rem,1.7vw,1.22rem);
  color:var(--ink-dim); font-weight:400; line-height:1.7;
  opacity:0; animation:rise 1.2s var(--ease) 1s forwards;
}

@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============================================================
   Countdown
   ============================================================ */
.sannu-countdown{
  margin-top:clamp(34px,5vw,58px);
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(14px,3.4vw,52px);
  opacity:0; animation:rise 1.3s var(--ease) 1.15s forwards;
}
.sannu-unit{ position:relative; min-width:64px; }
.sannu-unit + .sannu-unit::before{
  content:":"; position:absolute; left:calc(-1 * clamp(11px,1.7vw,28px));
  top:.04em; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem); color:var(--gold-deep); opacity:.55;
}
.sannu-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.sannu-num.flip{ animation:flip .5s var(--ease); }
@keyframes flip{
  0%{ transform:translateY(0); opacity:1; }
  45%{ transform:translateY(-8px); opacity:0; }
  55%{ transform:translateY(8px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
.sannu-label{
  margin-top:12px;
  font-family:var(--sans); font-weight:300;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-dim);
}
.sannu-countdown.is-done{ gap:0; }
.sannu-done-msg{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.6rem,4vw,2.6rem); color:var(--gold-light);
}

/* ============================================================
   Footer
   ============================================================ */
.sannu-foot{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap;
  padding:24px clamp(22px,5vw,64px) 38px;
  opacity:0; animation:rise 1.3s var(--ease) 1.35s forwards;
}
.sannu-social{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:11px 20px; border:1px solid var(--gold-line); border-radius:40px;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.sannu-social svg{ width:16px; height:16px; fill:currentColor; transition:transform .4s var(--ease); }
.sannu-social:hover{ color:var(--bg); background:var(--gold); border-color:var(--gold); }
.sannu-social:hover svg{ transform:rotate(-8deg) scale(1.06); }
.sannu-copy{
  font-family:var(--sans); font-weight:300; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
}

/* ============================================================
   Pagelayer content overflow area (any builder content renders here)
   ============================================================ */
.sannu-builder-area{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(22px,5vw,64px) 40px;
}
.sannu-builder-area:empty{ display:none; padding:0; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .sannu-logo-wrap,.sannu-status,.sannu-headline,.sannu-sub,.sannu-countdown,.sannu-foot,.sannu-motif{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width:560px){
  .sannu-top .eyebrow{ letter-spacing:.3em; font-size:10px; }
  .sannu-rule{ display:none; }
  .sannu-top{ justify-content:center; }
  .sannu-unit{ min-width:48px; }
}