/* ============================================================
   Дом Фенікса — перший екран.
   Усі класи й змінні мають префікс df-, щоб не зіштовхнутися
   зі стилями батьківської теми (.hero, .nav, .btn у них є майже
   завжди).

   Палітра й типографіка .df-root переїхали в style.css:
   вони потрібні не лише герою, а й картам, і мають вантажитися
   на кожній сторінці. Тут лишилося те, що стосується тільки
   першого екрана.
   ============================================================ */

.df-root{
  /* тло під фенікса — тільки на першому екрані */
  isolation:isolate;
}

.df-shell{width:100%;max-width:var(--df-shell);margin:0 auto;padding:0 40px}

/* ─── Нічне тло ────────────────────────────────────── */
.df-sky{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 780px at 74% 46%, rgba(46,42,120,.55), transparent 66%),
    radial-gradient(900px 620px at 12% 8%,  rgba(24,30,96,.5),  transparent 62%),
    linear-gradient(168deg, #0B1136 0%, #060A24 52%, #070B27 100%);
}
.df-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.df-star{position:absolute;border-radius:50%;background:#E9D19B}
@keyframes dfTwinkle{0%,100%{opacity:.18}50%{opacity:.85}}

/* ─── Шапка ────────────────────────────────────────── */
.df-header{position:relative;z-index:20;padding:26px 0}
.df-header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}

.df-nav ul{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.df-nav a{
  font-family:var(--df-display);font-size:1.02rem;letter-spacing:.055em;
  color:var(--df-gold);opacity:.82;text-decoration:none;
  position:relative;padding-bottom:6px;transition:opacity .22s;
}
.df-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--df-gold);transition:width .28s ease;
}
.df-nav a:hover{opacity:1}
.df-nav a:hover::after,
.df-nav .current-menu-item > a::after{width:100%}
.df-nav .current-menu-item > a{opacity:1}

.df-brand{display:flex;align-items:center;gap:13px;justify-self:center;text-decoration:none}
.df-brand-mark{
  width:42px;height:42px;object-fit:contain;
  filter:drop-shadow(0 0 9px rgba(201,138,46,.5));
}
.df-brand-name{
  font-family:var(--df-display);font-size:1.5rem;letter-spacing:.1em;
  color:var(--df-gold-lit);white-space:nowrap;
}

.df-header-right{display:flex;align-items:center;gap:18px;justify-self:end}

.df-lang{display:flex;gap:1px;border:1px solid rgba(201,169,97,.32);padding:2px}
.df-lang a{
  color:rgba(201,169,97,.72);text-decoration:none;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;padding:6px 10px;transition:.2s;
}
.df-lang a:hover{color:var(--df-gold-lit)}
.df-lang a[aria-current="true"]{background:var(--df-gold);color:var(--df-night-0)}

.df-icon-btn{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(201,169,97,.32);color:var(--df-gold);
  background:none;transition:.22s;cursor:pointer;
}
.df-icon-btn:hover{border-color:var(--df-gold);color:var(--df-gold-lit)}
.df-icon-btn svg{width:18px;height:18px}
.df-burger{display:none}

/* ─── Герой ────────────────────────────────────────── */
.df-hero{
  position:relative;z-index:10;
  min-height:calc(100svh - 92px);
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 0 0;
}
.df-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

.df-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--df-gold);font-weight:700;margin-bottom:30px;
}
.df-eyebrow::before{content:"";width:34px;height:1px;background:var(--df-gold);opacity:.6}

.df-root .df-h1{
  font-family:var(--df-display);font-weight:400;
  font-size:clamp(2.9rem,5.4vw,5.05rem);
  line-height:1.02;letter-spacing:.012em;
  color:var(--df-gold-lit);text-transform:uppercase;
  margin:0 0 30px;max-width:13ch;
}
.df-lede{
  font-family:var(--df-serif);font-style:italic;
  font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;
  color:rgba(242,236,220,.82);max-width:38ch;margin:0 0 44px;
}

.df-actions{display:flex;flex-wrap:wrap;gap:16px}
.df-root .df-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:19px 36px;font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--df-gold);border-radius:0;transition:.25s;
}
.df-root .df-btn-solid{background:var(--df-gold);color:var(--df-night-0)}
.df-root .df-btn-solid:hover{background:var(--df-gold-lit);border-color:var(--df-gold-lit)}
.df-root .df-btn-outline{background:rgba(6,10,36,.5);color:var(--df-gold-lit)}
.df-root .df-btn-outline:hover{background:rgba(201,169,97,.12)}

/* ─── Емблема ──────────────────────────────────────── */
.df-emblem-wrap{position:relative;display:grid;place-items:center}
.df-emblem-glow{
  position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.2), rgba(78,49,112,.13) 46%, transparent 68%);
  filter:blur(28px);
  animation:dfEmber var(--df-beat) ease-in-out infinite;
}
@keyframes dfEmber{
  0%,100%{opacity:.75;transform:scale(1)}
  58%    {opacity:1;transform:scale(1.05)}
}

.df-emblem{position:relative;width:min(600px,100%);height:auto;display:block;overflow:visible}
@keyframes dfSpin{to{transform:rotate(360deg)}}
@keyframes dfSpinBack{to{transform:rotate(-360deg)}}
.df-ring-slow{transform-origin:300px 300px;animation:dfSpin 220s linear infinite}
.df-ring-back{transform-origin:300px 300px;animation:dfSpinBack 320s linear infinite}
@keyframes dfBreathe{0%,100%{opacity:.5}50%{opacity:.95}}
.df-pulse{animation:dfBreathe 7s ease-in-out infinite}

/* ─── Фенікс: три шари ─────────────────────────────── */
.df-bird{
  position:absolute;top:50%;left:50%;width:64%;
  transform:translate(-50%,-50%);
  animation:dfLift var(--df-beat) ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(201,110,40,.4)) drop-shadow(0 0 86px rgba(169,67,44,.24));
  pointer-events:none;
}
.df-bird img{display:block;width:100%;height:auto;will-change:transform}
.df-bird .df-wing{position:absolute;top:0;left:0}
.df-bird .df-body{position:relative}

/* Крила обертаються навколо плечей; тіло лежить зверху й ховає корінь */
.df-w-l{transform-origin:44% 46%;animation:dfFlapL var(--df-beat) ease-in-out infinite}
.df-w-r{transform-origin:56% 46%;animation:dfFlapR var(--df-beat) ease-in-out infinite}
.df-bird .df-body{transform-origin:50% 42%;animation:dfSway var(--df-beat) ease-in-out infinite}

@keyframes dfFlapL{0%,100%{transform:rotate(-5.5deg)}50%{transform:rotate(6.5deg)}}
@keyframes dfFlapR{0%,100%{transform:rotate(5.5deg)}50%{transform:rotate(-6.5deg)}}
@keyframes dfSway {0%,100%{transform:rotate(.85deg)}50%{transform:rotate(-.85deg)}}
/* Птах піднімається трохи пізніше за мах — так читається поштовх */
@keyframes dfLift{
  0%,100%{transform:translate(-50%,-50%)}
  58%    {transform:translate(-50%,calc(-50% - 14px))}
}

/* ─── Низ героя ────────────────────────────────────── */
.df-hero-foot{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:34px 0 30px;margin-top:auto;
}
.df-announce{
  display:inline-flex;align-items:center;gap:12px;margin:0;
  font-size:.79rem;letter-spacing:.08em;color:rgba(242,236,220,.66);
}
.df-announce b{color:var(--df-gold-lit);font-weight:700}
.df-dot{width:6px;height:6px;background:var(--df-gold);border-radius:50%;flex:0 0 auto}
.df-announce a{color:var(--df-gold);text-decoration:none;border-bottom:1px solid rgba(201,169,97,.4);padding-bottom:1px}
.df-announce a:hover{color:var(--df-gold-lit)}

.df-scroll-cue{
  background:none;border:0;color:var(--df-gold);opacity:.66;cursor:pointer;
  display:grid;place-items:center;padding:8px;transition:opacity .22s;
}
.df-scroll-cue:hover{opacity:1}
.df-scroll-cue svg{width:26px;height:26px;animation:dfBob 2.6s ease-in-out infinite}
@keyframes dfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ─── Адаптив ──────────────────────────────────────── */
@media (max-width:1080px){
  .df-shell{padding:0 26px}
  .df-nav{display:none}
  .df-nav.df-open{
    display:block;position:absolute;top:92px;left:0;right:0;z-index:30;
    background:#0B1136;border-bottom:1px solid rgba(201,169,97,.24);padding:20px 26px;
  }
  .df-nav.df-open ul{flex-direction:column;align-items:flex-start;gap:16px}
  .df-burger{display:grid}
  .df-header-row{grid-template-columns:auto 1fr auto}
  .df-brand{justify-self:start;margin-left:6px}
  .df-hero-grid{grid-template-columns:1fr;gap:40px;text-align:center;justify-items:center}
  .df-root .df-h1{max-width:16ch}
  .df-lede{max-width:46ch}
  .df-actions{justify-content:center}
  .df-eyebrow{justify-content:center}
  .df-emblem-wrap{order:-1}
  .df-emblem{width:min(400px,74vw)}
  .df-hero-foot{flex-direction:column;text-align:center;gap:18px}
}
@media (max-width:600px){
  .df-shell{padding:0 20px}
  .df-brand-name{font-size:1.2rem}
  .df-hero{min-height:auto;padding:24px 0 0}
  .df-root .df-btn{padding:17px 26px;font-size:.75rem;flex:1 1 auto}
  .df-actions{width:100%}
  .df-emblem{width:min(320px,80vw)}
  .df-announce{font-size:.74rem;flex-wrap:wrap;justify-content:center}
}

/* Постійний рух на першому екрані нестерпний для людей
   із вестибулярними розладами — це не опція, а вимога. */
@media (prefers-reduced-motion:reduce){
  .df-root *,.df-root *::before,.df-root *::after,
  .df-stars *{animation:none!important;transition-duration:.01ms!important}
}

.df-root :focus-visible{outline:2px solid var(--df-gold-lit);outline-offset:4px}