/* ==========================================================================
   Hybee — Design tokens
   ========================================================================== */

:root{
  /* color */
  --bg:            #060a08;
  --bg-soft:       #0b110d;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.07);
  --border:        rgba(255,255,255,.10);
  --border-accent: rgba(201,255,61,.32);

  --accent:        #C9FF3D;
  --accent-dim:    #9FD92A;
  --accent-ink:    #0c1406;

  --text:          #F5F7F1;
  --text-muted:    rgba(245,247,241,.66);
  --text-faint:    rgba(245,247,241,.42);

  /* type */
  --font-display: "Unbounded", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* fluid type — calibrated for 100% zoom on 1366–1920px screens */
  --fs-h1:      clamp(1.6rem, 0.8rem + 2.5vw, 3.2rem);
  --fs-h2:      clamp(1.4rem, 0.7rem + 1.8vw, 2.4rem);
  --fs-eyebrow: clamp(.65rem, .6rem + .12vw, .75rem);
  --fs-body:    clamp(.85rem, .8rem + .18vw, .98rem);
  --fs-btn:     clamp(.8rem, .76rem + .1vw, .88rem);
  --fs-tag:     clamp(.6rem, .55rem + .1vw, .7rem);

  /* layout */
  --container-w: 88vw;
  --header-h: 64px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,1,.36,1);
}

@media (min-width: 1600px){
  :root{
    --container-w: 86vw;
    --header-h: 72px;
  }
}

@media (min-width: 1900px){
  :root{
    --container-w: 84vw;
    --header-h: 76px;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

html, body{ height: 100%; }

body{
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: var(--header-h);
}

img, video{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul{ margin: 0; padding: 0; list-style: none; }

.container{
  width: var(--container-w);
  margin-inline: auto;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus{ left: 0; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-btn);
  white-space: nowrap;
  padding: .7em 1.3em;
  border-radius: var(--radius-pill);
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, box-shadow .35s ease;
}

.btn svg{ flex-shrink: 0; }

.btn--accent{
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 rgba(201,255,61,0);
}
.btn--accent:hover{
  background: var(--accent-dim);
  box-shadow: 0 8px 28px -8px rgba(201,255,61,.55);
  transform: translateY(-2px);
}
.btn--accent:active{ transform: translateY(0); }

.btn--ghost{
  padding: .7em 0;
  color: var(--text);
  font-weight: 600;
}
.btn--ghost .btn__play-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  transition: background-color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.btn--ghost:hover .btn__play-icon{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  transform: scale(1.07);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  flex-shrink: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled{
  background: rgba(6,10,8,.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.site-header__inner{
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .3vw, 1.3rem);
  letter-spacing: -.01em;
  flex-shrink: 0;
  margin-right: auto;
}
.logo__dot{ color: var(--accent); }

.nav{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav__list{
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 1rem + 1vw, 2.2rem);
}

.nav__link{
  position: relative;
  font-size: clamp(.82rem, .78rem + .12vw, .9rem);
  font-weight: 600;
  color: var(--text-muted);
  padding: .3em 0;
  transition: color .25s ease;
}
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--accent);
  transition: right .3s var(--ease);
}
.nav__link:hover,
.nav__link.is-active{ color: var(--text); }
.nav__link.is-active::after,
.nav__link:hover::after{ right: 0; }

.header-cta{
  flex-shrink: 0;
  margin-left: auto;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.nav-toggle span{
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 5% 2.25rem;
  background: rgba(6, 10, 8, 0.95);
  border-top: 1px solid rgba(255,255,255,.06);
}

.mobile-nav-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
}
.mobile-nav-overlay.is-open{
  display: block;
}
.mobile-nav__list{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.mobile-nav__list a{
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}
.mobile-nav__list a.is-active{ color: var(--accent); }
.mobile-nav__cta{ align-self: flex-start; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100dvh - var(--header-h));
  padding-top: clamp(1.5rem, 1rem + 2dvh, 3rem);
  padding-bottom: 0;
}

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 82% 38%, rgba(140,200,30,.16), transparent 70%),
    radial-gradient(45% 40% at 6% 90%, rgba(120,180,30,.08), transparent 70%),
    var(--bg);
}

.hero__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  height: calc(100dvh - var(--header-h));
}

.hero__content{
  align-self: center;
}

.hero__content{ max-width: 560px; }

.badge{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .02em;
  color: var(--text-muted);
  padding: .4em .9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  margin-bottom: clamp(.6rem, .4rem + .6vw, 1.2rem);
}
.badge__dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,255,61,.18);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference){
  .badge__dot{ animation: pulse-dot 2.2s ease-in-out infinite; }
}
@keyframes pulse-dot{
  0%, 100%{ box-shadow: 0 0 0 3px rgba(201,255,61,.18); }
  50%{ box-shadow: 0 0 0 6px rgba(201,255,61,.06); }
}

.hero__title{
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 clamp(.5rem, .3rem + .5vw, 1rem);
  color: var(--text);
}
.text-accent{ color: var(--accent); }

.hero__desc{
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 0 clamp(.8rem, .5rem + .8vw, 1.4rem);
}

.hero__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(.8rem, .6rem + .6vw, 1.4rem);
  margin-bottom: clamp(.8rem, .5rem + .8vw, 1.6rem);
}

.hero__social{
  display: flex;
  align-items: center;
  gap: .7rem;
}
.social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color .25s ease, border-color .25s ease, transform .3s var(--ease), background-color .25s ease;
}
.social-link:hover{
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* ---- visual / mascot stage ---------------------------------------------- */

.hero__visual{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.hero__visual-frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: visible;
  isolation: isolate;
  background: #0f1a12;
}
.hero__visual-frame.is-loaded{
  background: transparent;
}
.hero__visual-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #0f1a12 0%,
    #1a2e1e 30%,
    #24402a 50%,
    #1a2e1e 70%,
    #0f1a12 100%
  );
  background-size: 200% 100%;
  animation: hero-shimmer 1.6s ease-in-out infinite;
  transition: opacity .4s ease;
}
.hero__visual-frame.is-loaded::after{
  opacity: 0;
  pointer-events: none;
  animation: none;
}
@keyframes hero-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.hero__image{
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 110%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transition: opacity .65s var(--ease), transform .8s var(--ease), filter .65s var(--ease);
}

.hero__video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: none;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  background: #000;
  transition: opacity .65s var(--ease);
}

.hero.is-playing .hero__image{
  opacity: 0;
  filter: blur(2px);
  transition: opacity .4s ease, filter .4s ease;
}
.hero.is-playing .hero__video{
  opacity: 1;
  pointer-events: auto;
}
.hero.is-playing .hero__content,
.hero.is-playing .float-tag{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.hero__visual-close{
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 201;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(6,10,8,.7);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s var(--ease), visibility 0s linear .35s, background-color .25s ease, border-color .25s ease;
}
.hero.is-playing .hero__visual-close{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .35s ease .2s, transform .35s var(--ease) .2s, visibility 0s linear;
}
.hero__visual-close:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* floating skill tags */

.float-tag{
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  padding: .55em .9em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-accent);
  background: rgba(8,14,9,.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.float-tag svg{ color: var(--accent); flex-shrink: 0; }

.float-tag--1{ left: 8%; top: 28%; }
.float-tag--2{ left: 8%; top: 68%; }
.float-tag--3{ right: 2%; top: 48%; }

.hero.is-playing .float-tag{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  .float-tag{ animation: float-bob 5s ease-in-out infinite; }
  .float-tag--2{ animation-delay: .6s; }
  .float-tag--3{ animation-delay: 1.2s; }
}
@keyframes float-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.hero.is-playing .float-tag{ animation: none; }

/* ---- entrance reveal ----------------------------------------------------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    animation: reveal-up .8s var(--ease) forwards;
    animation-delay: .15s;
  }
  [data-reveal-delay="1"]{ animation-delay: .35s; }
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}
@keyframes reveal-up{
  to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px){
  .nav,
  .header-cta{ display: none; }
  .nav-toggle{ display: flex; }
  .mobile-nav.is-open{ display: flex; }

  .hero__inner{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 38dvh) minmax(0, 1fr);
    gap: clamp(1rem, .6rem + 2dvh, 2rem);
  }
  .hero__visual{ order: 1; }
  .hero__visual-frame{ max-height: 100%; }
  .hero__content{ max-width: none; }
}

@media (max-width: 640px){
  :root{ --header-h: 56px; }

  .hero__actions{ gap: 1rem 1.5rem; }

  .float-tag{
    font-size: .58rem;
    padding: .5em .75em;
  }
  .float-tag--1{ left: 5%; }
  .float-tag--2{ left: 5%; }
  .float-tag--3{ right: 3%; }
}

@media (max-width: 420px){
  .float-tag svg{ display: none; }
}