/* styles.css (no JavaScript required) */
:root{
  --drawer-w: 45vw; /* left one-third */
  --drawer-max: 1000px;
  --drawer-min: 400px;
  --panel: #030406;
  --accent: #101e33;
  --text: #e9eefb;
  --muted: #9fb0d0;
  --scrim: rgba(0,0,0,.45);
  --radius: 16px;
  --speed: 260ms;
  --easing: cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b1220,#0e1630 60%,#0b1220);
  overflow-x:hidden;
}
.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}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;         /* ✅ valid alignment for flex items */
  justify-content: flex-end;   /* ✅ move items (like hamburger) to the right */
  gap: 12px;
  padding: 28px 19px;
  background: rgba(0, 0, 0, 0.7); /* 70% black transparency */
  backdrop-filter: none;    
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brand{font-weight:700}
.hamburger{cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:10px}
.hamburger .bars{position:relative;width:22px;height:2px;background:currentColor;color:var(--text)}
.hamburger .bars::before,.hamburger .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform var(--speed) var(--easing),opacity var(--speed) var(--easing),top var(--speed) var(--easing)}
.hamburger .bars::before{top:-7px}.hamburger .bars::after{top:7px}

.text-rotator {
  position: fixed;
  bottom: 2vw;       /* responsive vertical offset */
  right: 4vw;        /* responsive horizontal offset */
  max-width: 80vw;   /* prevent text overflow on phones */
  color: #c1bdbd;    /* soft off-white */
  font-family: system-ui, sans-serif;
  font-size: clamp(2rem, 3vw, 3rem); /* scales with screen */
  text-align: right;
  line-height: 1.2;
  z-index: 8;
}

/* hide all lines by default */
.text-rotator p {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 8;
  animation: fadeText 16s infinite;
}

/* delay each line to appear in sequence */
.text-rotator p:nth-child(1) { animation-delay: 0s; }
.text-rotator p:nth-child(2) { animation-delay: 4s; }
.text-rotator p:nth-child(3) { animation-delay: 8s; }
.text-rotator p:nth-child(4) { animation-delay: 12s; }

/* keyframes: fade in, hold, fade out */
@keyframes fadeText {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  25%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Video fills and crops responsively */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* key to full-bleed without distortion */
  object-position: center;
}
.hero__logo {
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: clamp(100px, 4vw, 170px);
  z-index: 7;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
  opacity: 0.8;
}

.hero__logo:hover {
  transform: scale(1.05);
  opacity:0.7;
}

/* Drawer & scrim */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;                /* anchor to the right side */
  width: min(max(var(--drawer-w), var(--drawer-min)), var(--drawer-max));
  background: var(--panel);
  box-shadow: 0 10px 50px rgba(0,0,0,.45);
  transform: translateX(100%);      /* start off-screen to the right */
  transition: transform var(--speed) var(--easing);
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid rgba(255,255,255,.08); /* left border now */
}
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--speed) var(--easing);z-index:90}

/* Open states driven by checkbox */
#drawer-toggle:checked ~ .scrim{opacity:1;pointer-events:auto}
#drawer-toggle:checked ~ .drawer {
  transform: translateX(0);         /* slide into view from right */
}
/* Drawer header */
.drawer__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.tabs{display:flex;gap:8px}
.tab{cursor:pointer;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--text);padding:8px 12px;border-radius:999px;font-weight:600}

/* Tab visual states (radio checked → highlight matching label) */
#tab-about:checked ~ .drawer__header .tabs label[for="tab-about"],
#tab-contact:checked ~ .drawer__header .tabs label[for="tab-contact"]{background:rgba(106,166,255,.15);border-color:rgba(106,166,255,.5)}

.drawer__close{cursor:pointer;color:var(--muted);padding:8px;border-radius:8px;font-weight:700}
.drawer__content{overflow:auto;padding:16px}
.panel{display:none}

/* Show/hide panels based on which radio is checked */
#tab-about:checked ~ .drawer__content #panel-about{display:block}
#tab-contact:checked ~ .drawer__content #panel-contact{display:block}

.about h2{margin-top:0;font-size:24px}
.about p{color:var(--muted)}

/* Contact form */
form{display:grid;gap:12px}
label{font-weight:600;font-size:14px}
input,textarea{width:100%;padding:10px 12px;color:var(--text);background:#070d20;border:1px solid rgba(255,255,255,.14);border-radius:10px}
input::placeholder,textarea::placeholder{color:#93a3c2}
textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{border:0;background:var(--accent);color:#d7d9dc;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer}
.footer-note{color:var(--muted);font-size:12px;text-align:center;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}