/* ══════════════════════════════════════════════════════
   DEZXEY — css/premium-components.css
   Vanilla JS/CSS ports of 7 React reference components,
   restyled to the Dezxey brand palette (orange/navy/cyan).
   Loaded after css/main.css — safe to layer on top.
   ══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   1) KINETIC TEXT LOADER — page preloader
   ──────────────────────────────────────────────────── */
#dz-preloader {
  position: fixed; inset: 0; z-index: 999999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), visibility .6s;
}
#dz-preloader.dz-loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.dz-kinetic-loader { position: relative; display: flex; align-items: center; justify-content: center; }
.dz-kinetic-loader .dz-kt-dot {
  position: absolute; z-index: 2; top: -14px; left: 46%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px 2px rgba(242,92,27,.6);
}
.dz-kinetic-loader p {
  margin: 0; white-space: nowrap; font-family: var(--font-d);
  font-size: clamp(2.2rem, 8vw, 3.6rem); letter-spacing: .12em;
  color: var(--text); text-transform: uppercase;
}
.dz-kinetic-loader p span { display: inline-block; position: relative; }
.dz-kt-bounce, .dz-kt-stretch { transform-origin: 50% 90%; }
@media (prefers-reduced-motion: reduce) { #dz-preloader { display: none !important; } }

/* ────────────────────────────────────────────────────
   2) NOTCH NAVBAR — corner-notch glass accents on header
   ──────────────────────────────────────────────────── */
.site-header .notch-accent {
  position: absolute; top: 0; height: 100%; width: 26px;
  pointer-events: none; opacity: .55; z-index: 1;
}
.site-header .notch-accent.left  { left: -1px; }
.site-header .notch-accent.right { right: -1px; transform: scaleX(-1); }
.site-header .notch-accent svg { width: 100%; height: 100%; display: block; }
.site-header .notch-accent path { stroke: rgba(180,200,235,.16); stroke-width: .6; fill: none; }
.site-header::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,92,27,.25), transparent);
  opacity: 0; transition: opacity .4s;
}
.site-header.scrolled::before { opacity: 1; }

/* ────────────────────────────────────────────────────
   3) GENERATE BUTTON — premium animated CTA button
   ──────────────────────────────────────────────────── */
.gen-btn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: .7s;
  --transition-ease: cubic-bezier(.16,1,.3,1);
  --gen-hue: 16deg; /* tuned to Dezxey orange */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
  padding: .85em .9em .85em 1.3em;
  font-family: var(--font-b); font-size: 1rem; font-weight: 700;
  color: #fff;
  background-color: #101010;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 2px 2px rgba(255,255,255,.15),
    inset 0 4px 4px rgba(255,255,255,.1),
    inset 0 8px 8px rgba(255,255,255,.05),
    inset 0 16px 16px rgba(255,255,255,.05),
    0 -1px 1px rgba(0,0,0,.02), 0 -2px 2px rgba(0,0,0,.03),
    0 -4px 4px rgba(0,0,0,.05), 0 -8px 8px rgba(0,0,0,.06), 0 -16px 16px rgba(0,0,0,.08);
  border: solid 1px rgba(255,255,255,.133);
  border-radius: var(--border-radius);
  cursor: pointer; text-decoration: none;
  transition: box-shadow var(--transition) var(--transition-ease),
              border var(--transition) var(--transition-ease),
              background-color var(--transition) var(--transition-ease),
              transform .3s cubic-bezier(.16,1,.3,1);
}
.gen-btn:hover { transform: scale(1.015); border-color: hsla(var(--gen-hue),100%,80%,.4); }
.gen-btn:active { transform: scale(.96); border-color: hsla(var(--gen-hue),100%,80%,.7); background-color: hsla(var(--gen-hue),50%,20%,.5); }
.gen-btn::before {
  content: ''; position: absolute;
  top: calc(0px - var(--padding)); left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none; z-index: -1;
  background-image: linear-gradient(0deg, rgba(0,0,0,.267), rgba(0,0,0,.667));
  box-shadow: 1px 1px 1px rgba(255,255,255,.133), 2px 2px 2px rgba(255,255,255,.067),
              -1px -1px 1px rgba(0,0,0,.133), -2px -2px 2px rgba(0,0,0,.067);
  transition: box-shadow var(--transition) var(--transition-ease);
}
.gen-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(0deg, #fff, hsl(var(--gen-hue),100%,60%), hsla(var(--gen-hue),100%,60%,.5) 8%, transparent);
  opacity: 0; transition: opacity var(--transition) var(--transition-ease);
}
.gen-btn:hover::after, .gen-btn:active::after { opacity: 1; mask-image: linear-gradient(0deg,#fff,transparent); }
.gen-btn-svg {
  flex: none; width: 22px; height: 22px; margin-right: .55rem;
  fill: #e8e8e8; animation: dz-gen-flicker 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
}
@keyframes dz-gen-flicker { 50% { opacity: .35; } }
.gen-btn:hover .gen-btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--gen-hue),100%,60%)); animation: none; }
.gen-txt-wrapper { position: relative; display: inline-flex; align-items: center; }
.gen-btn-letter {
  position: relative; display: inline-block; color: rgba(255,255,255,.55);
  animation: dz-gen-letter 3.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes dz-gen-letter { 50% { text-shadow: 0 0 4px rgba(255,255,255,.53); color: #fff; } }
.gen-btn-letter:nth-child(1) { animation-delay: 0s; }
.gen-btn-letter:nth-child(2) { animation-delay: .08s; }
.gen-btn-letter:nth-child(3) { animation-delay: .16s; }
.gen-btn-letter:nth-child(4) { animation-delay: .24s; }
.gen-btn-letter:nth-child(5) { animation-delay: .32s; }
.gen-btn-letter:nth-child(6) { animation-delay: .4s; }
.gen-btn-letter:nth-child(7) { animation-delay: .48s; }
.gen-btn-letter:nth-child(8) { animation-delay: .56s; }
.gen-btn-letter:nth-child(9) { animation-delay: .64s; }
.gen-btn-letter:nth-child(10) { animation-delay: .72s; }
.gen-btn-letter:nth-child(11) { animation-delay: .8s; }
.gen-btn-letter:nth-child(12) { animation-delay: .88s; }
.gen-btn-letter:nth-child(13) { animation-delay: .96s; }
.gen-btn-letter:nth-child(14) { animation-delay: 1.04s; }
.gen-btn-letter:nth-child(15) { animation-delay: 1.12s; }
.gen-btn-letter:nth-child(16) { animation-delay: 1.2s; }
.gen-btn-letter:nth-child(17) { animation-delay: 1.28s; }
.gen-btn-letter:nth-child(18) { animation-delay: 1.36s; }
.gen-btn-letter:nth-child(19) { animation-delay: 1.44s; }
.gen-btn-letter:nth-child(20) { animation-delay: 1.52s; }
/* "Generating…" state, toggled via [data-generating="true"] on click */
.gen-btn[data-generating="true"] .gen-btn-letter {
  animation: dz-gen-focus 1.6s cubic-bezier(.45,0,.2,1) forwards, dz-gen-letter 1.8s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay: 0s, 1.6s;
}
@keyframes dz-gen-focus {
  0%, 100% { filter: blur(0); }
  50% { transform: scale(1.4); filter: blur(6px) brightness(150%) drop-shadow(-18px 6px 8px hsl(var(--gen-hue),100%,60%)); }
}
.gen-btn[data-generating="true"] .gen-btn-svg { animation-duration: 1.8s; }

/* ────────────────────────────────────────────────────
   4) FAQ ACCORDION v2 — left-accent style, plus/minus swap
   ──────────────────────────────────────────────────── */
.faq-grid.faq-premium { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin: 0 auto; }
.faq-premium .faq-item {
  border: none; border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.015);
  border-left: 6px solid var(--border-strong);
  transition: border-color .35s cubic-bezier(.16,1,.3,1), background-color .35s cubic-bezier(.16,1,.3,1);
}
.faq-premium .faq-item.open {
  border-left-color: var(--orange);
  background: linear-gradient(160deg, rgba(242,92,27,.08), rgba(242,92,27,.02));
}
.faq-premium .faq-question {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 48px 20px 24px; position: relative;
  transition: background-color .25s ease;
}
.faq-premium .faq-question:hover { background: rgba(242,92,27,.05); }
.faq-premium .faq-question span:first-child { flex: 1; }
.faq-premium .faq-icon {
  border: none; border-radius: 0; width: auto; height: auto; min-width: 0;
  font-size: 1.7rem; line-height: 1; font-weight: 400; color: var(--muted-2);
  transition: color .35s cubic-bezier(.16,1,.3,1); flex: none;
}
.faq-premium .faq-item.open .faq-icon { color: var(--orange); transform: none; }
.faq-premium .faq-chevron {
  position: absolute; right: 24px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--muted-2); border-right: 2px solid var(--muted-2);
  transform: translateY(-65%) rotate(135deg);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.faq-premium .faq-item.open .faq-chevron {
  transform: translateY(-35%) rotate(-45deg);
  border-color: var(--orange);
}
/* Robust expand: grid-template-rows 0fr -> 1fr instead of a fixed/JS-measured
   max-height. This always reveals the full answer regardless of viewport
   width, font-size, or whether JS ran before layout was ready. */
.faq-premium .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none !important;
  overflow: hidden;
  transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1);
}
.faq-premium .faq-answer > p {
  overflow: hidden;
  min-height: 0;
  border-top: none;
  padding: 0 24px 22px 24px;
  color: var(--muted);
}
.faq-premium .faq-item.open .faq-answer { grid-template-rows: 1fr; }

/* ────────────────────────────────────────────────────
   5) CYLINDER CAROUSEL — 3D rotating portfolio reel
   ──────────────────────────────────────────────────── */
.dz-cylinder-section { padding: var(--pad); overflow: hidden; }
.dz-cylinder-wrap {
  width: 100%; min-height: 400px; display: grid; place-items: center; overflow: hidden;
  perspective: 35em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20% 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20% 80%, transparent);
}
.dz-cylinder-track {
  display: grid; place-items: center; transform-style: preserve-3d;
}
.dz-cylinder-track img {
  grid-area: 1 / 1; object-fit: cover; border-radius: 16px; backface-visibility: hidden;
  width: var(--dz-cyl-w, 230px); aspect-ratio: 7 / 10;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
/* Card width/min-height are recalculated in JS on load + resize so the
   reel keeps the same visual ratio and stays centered on any screen size.
   These are just safe fallbacks before JS runs. */
@media (max-width: 768px) { .dz-cylinder-wrap { min-height: 260px; } }
@media (max-width: 480px) { .dz-cylinder-wrap { min-height: 220px; } }

/* ────────────────────────────────────────────────────
   6) PERSPECTIVE GRID — animated 3D tile background
   ──────────────────────────────────────────────────── */
.dz-perspective-grid {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  perspective: 1400px; pointer-events: none;
}
.dz-pg-plane {
  position: absolute; left: 50%; top: 50%; width: 90rem; aspect-ratio: 1/1;
  display: grid; transform-style: preserve-3d;
  transform: translate(-50%,-50%) rotateX(30deg) rotateY(-5deg) rotateZ(20deg) scale(2);
}
.dz-pg-plane .dz-tile {
  min-height: 1px; min-width: 1px; border: 1px solid rgba(180,200,235,.08);
  background: transparent; transition: background-color 1.6s cubic-bezier(.16,1,.3,1);
}
.dz-pg-plane .dz-tile:hover { background-color: rgba(242,92,27,.35); transition-duration: .12s; }
.dz-pg-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, transparent 25%, var(--bg) 78%);
}
@media (max-width: 768px) { .dz-perspective-grid { display: none; } }