/* =========================================================
   SUGI Core CSS — Dual Color Engine
   Scene = f(dark, gold)
   ========================================================= */

:root{
  /* === Brand anchors (ONLY these two matter) === */
  --sugi-dark: 15 23 42; /* #0f172a SUGI navy */
  --sugi-gold: 196 150 65;    /* SUGI gold (RGB triplet) */

  /* === Horizon === */
  --horizon-from-top: 72%;
  --horizon-from-bottom: calc(100% - var(--horizon-from-top));
}

/* ---------- Base ---------- */

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #e2e8f0;

  /* === SCENE BACKGROUND === */
  background:
    /* gold haze from below */
    /*radial-gradient(
      220% 120% at 50% 100%,
      rgb(var(--sugi-gold) / 0.18) 0%,
      rgb(var(--sugi-gold) / 0.06) 38%,
      transparent 68%
    ),
*/
    /* horizon bloom */
      radial-gradient(
        80% 10% at 50% var(--horizon-from-top),
        rgb(var(--sugi-gold) / 0.11) 0%,
        rgb(var(--sugi-gold) / 0.03) 42%,
        transparent 72%
      ),

    /* deepening night */
    /* radial-gradient(
      180% 120% at 50% 0%,
      transparent 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.55) 100%
    ),
*/
    /* base */
    radial-gradient(
      800% 100% at 50% 100%,
      rgb(var(--sugi-dark) / 1) 0%,
      rgb(var(--sugi-dark) / 1) var(--horizon-from-bottom),
      rgb(var(--sugi-dark) / 0.99) var(--horizon-from-bottom),
      rgb(var(--sugi-dark) / 1) 100%
    );
/*
    linear-gradient(
      to bottom,
      var(--sugi-dark),
      var(--sugi-dark)
    );
*/
  background-repeat: no-repeat;
}

/* ---------- Hero ---------- */

.hero{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Atmospheric vignette ---------- */

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      140% 120% at 50% 35%,
      transparent 0%,
      rgba(0,0,0,0.35) 65%,
      rgba(0,0,0,0.55) 100%
    );
}

/* ---------- Golden light wedge ---------- */

.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top: var(--horizon-from-top);
  bottom:0;
  pointer-events:none;
  z-index:1;

  background:
    conic-gradient(
      from 90deg at 50% -10%,
      rgb(var(--sugi-gold) / 0.00) 0deg,
      rgb(var(--sugi-gold) / 0.06) 35deg,
      rgb(var(--sugi-gold) / 0.22) 75deg,
      rgb(var(--sugi-gold) / 0.22) 105deg,
      rgb(var(--sugi-gold) / 0.06) 145deg,
      rgb(var(--sugi-gold) / 0.00) 180deg
    );

  filter: blur(2px);
  opacity: 0.55;

  animation:
    heroFloat 13s ease-in-out infinite,
    dustBreath 13s ease-in-out infinite;
}

@keyframes heroFloat{
  0%,100%{ transform: translateY(0) rotate(-0.35deg); }
  50%{ transform: translateY(0.67vh) rotate(0.35deg); }
}

@keyframes dustBreath{
  0%,100%{ opacity: 0.55; filter: blur(2px); }
  50%{ opacity: 0.85; filter: blur(3px); }
}

/* ---------- Logo anchors ---------- */

.tree-anchor{
  position: absolute;
  left: 50%;
  top: var(--horizon-from-top);
  transform: translate(-50%, -95%);
  z-index: 2;
}

.text-anchor{
  position: absolute;
  left: 50%;
  top: var(--horizon-from-top);
  transform: translate(-50%, 50%);
  z-index: 2;
}

/* ---------- Logo elements ---------- */

.logo-tree{
  width: clamp(107px, 11vw, 322px);
  height: auto;

  filter:
    drop-shadow(0 10px 28px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgb(var(--sugi-gold) / 0.22));

  animation:
    treeGlow 13s ease-in-out infinite,
    treeFloat 13s ease-in-out infinite;
}

@keyframes treeGlow{
  0%,100%{
    filter:
      drop-shadow(0 10px 28px rgba(0,0,0,0.35))
      drop-shadow(0 0 12px rgb(var(--sugi-gold) / 0.18));
  }
  50%{
    filter:
      drop-shadow(0 14px 34px rgba(0,0,0,0.40))
      drop-shadow(0 0 22px rgb(var(--sugi-gold) / 0.30));
  }
}

@keyframes treeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(0.67vh); }
}

/* ---------- Mail FAB ---------- */

.mailfab{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.05rem;
  border-radius: 999px;

  color: #1a1406;
  text-decoration: none;
  font-weight: 600;

  background: linear-gradient(
    135deg,
    rgb(var(--sugi-gold) / 0.95),
    rgb(var(--sugi-gold) / 0.75)
  );

  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}