
/* Krynavexoriar: centered seven-link navigation and cinematic square-built world.
   Approved Concept 04 preserved. All controls stay outside transformed ancestors. */
.site-header{position:relative;z-index:35;height:83px;overflow:visible;background:rgba(7,17,22,.98);}
.site-header .header-row{display:grid;grid-template-columns:minmax(208px,1fr) auto minmax(208px,1fr);align-items:center;gap:17px;position:relative;z-index:2}
.site-header .brand{justify-self:start;min-width:0}
.site-header .header-nav{justify-self:center;margin:0;display:flex;align-items:center;gap:clamp(11px,1.35vw,23px);height:100%}
.site-header .header-nav a{font-size:13px;font-weight:500;letter-spacing:.005em;padding:30px 1px 29px;line-height:1.3;white-space:nowrap;transition:color .17s ease;position:relative}
.site-header .header-nav a:after{bottom:21px!important;transform-origin:center;transition:transform .18s ease;}
.site-header .header-nav a:hover,.site-header .header-nav a.preview-current{color:var(--accent)}
.site-header .header-actions{justify-self:end;gap:12px}
.site-header .header-free{font-size:12px;min-height:42px;padding:0 19px;display:inline-flex;border-radius:50px}
.site-header .header-free span{font-size:16px}
/* A compact three-column preview, reference-inspired but in approved dark/copper palette. */
.mega-preview{position:absolute;top:calc(100% - 1px);left:50%;width:min(1120px,calc(100% - 64px));transform:translate(-50%,-10px);opacity:0;visibility:hidden;pointer-events:none;z-index:40;padding-top:8px;transition:transform .26s cubic-bezier(.22,.68,0,1),opacity .21s,visibility .21s}
.mega-preview.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.mega-preview-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-radius:21px;padding:22px 26px;box-shadow:0 20px 52px rgba(0,0,0,.5),0 0 0 1px rgba(247,163,92,.19) inset;background:linear-gradient(132deg,rgba(21,38,44,.98),rgba(10,24,30,.99));border:1px solid rgba(225,181,134,.23);backdrop-filter:blur(14px)}
.mega-preview-item{min-width:0;display:flex;align-items:center;gap:13px;padding:15px 11px;border-radius:12px;border:1px solid transparent;transition:background .2s,transform .2s,border-color .2s}
.mega-preview-item:hover,.mega-preview-item:focus-visible{background:rgba(247,163,92,.09);border-color:rgba(247,163,92,.35);transform:translateY(-3px)}
.mega-preview-icon{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:12px;background:rgba(247,163,92,.14);border:1px solid rgba(247,163,92,.19)}
.mega-preview-icon img{width:26px;height:26px;object-fit:contain}
.mega-preview-copy{display:grid;gap:3px;line-height:1.25;min-width:0}
.mega-preview-copy strong{font:500 18px/1.15 var(--serif);color:var(--ivory)}
.mega-preview-copy small{font-size:11px;line-height:1.4;color:#aab6b6;font-weight:400}
.mega-preview-arrow{align-self:center;margin-left:auto;color:var(--accent);font-size:18px;opacity:0;transition:opacity .2s}
.mega-preview-item:hover .mega-preview-arrow,.mega-preview-item:focus-visible .mega-preview-arrow{opacity:1}
/* The original fantasy panorama remains the one and only final background image. */
.home-hero .hero-art img{animation:none!important;transform:none!important}
.home-hero .hero-art{z-index:0}
.home-hero .hero-pixel-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0}
html.hero-build-mode .home-hero .hero-pixel-canvas{opacity:1}
html.hero-build-mode .home-hero .hero-art{-webkit-mask-image:radial-gradient(ellipse 97px 175px at 48% 60%,#000 0 61%,rgba(0,0,0,.75) 79%,transparent 100%);mask-image:radial-gradient(ellipse 97px 175px at 48% 60%,#000 0 61%,rgba(0,0,0,.75) 79%,transparent 100%)}
.home-hero .hero-veil{z-index:2}
.home-hero .living-hero-layers{z-index:3}
.home-hero .hero-content{z-index:5}
.home-hero .hero-build-caption{position:absolute;right:32px;bottom:22px;display:flex;gap:9px;align-items:center;padding:8px 11px;z-index:4;pointer-events:none;border-radius:3px;border:1px solid rgba(247,163,92,.35);background:rgba(5,15,19,.72);color:#ffe1bd;font:700 10px/1.2 var(--sans);letter-spacing:.12em;opacity:0;transform:translateY(7px);transition:opacity .19s,transform .19s}
html.hero-build-mode .hero-build-caption{opacity:1;transform:none}
.hero-build-caption .build-caption-mark{width:10px;height:10px;border:1.5px solid var(--accent);box-shadow:0 0 10px var(--accent)}
.hero-build-caption .build-caption-progress{color:var(--accent);min-width:32px;text-align:right}
/* Menus are never children of transformed, filtered, or faded containers. */
.menu-backdrop{z-index:70}.mobile-menu{z-index:80}
@media(max-width:1340px){.site-header .header-row{grid-template-columns:minmax(185px,1fr) auto minmax(185px,1fr)}.site-header .header-nav{gap:12px}.site-header .header-nav a{font-size:12.5px}.site-header .brand{font-size:24px}.site-header .header-free{padding-inline:14px}}
@media(max-width:1190px){.site-header .header-free{display:none!important}.site-header .header-row{grid-template-columns:1fr auto 1fr}.site-header .header-nav{gap:clamp(13px,2vw,22px)}}
@media(max-width:990px){.site-header{height:72px}.site-header .header-row{display:flex;justify-content:space-between}.site-header .header-actions{margin-left:auto}.site-header .header-nav{display:none!important}.site-header .menu-toggle{display:flex}.mega-preview{display:none!important}}
@media(max-width:600px){.site-header{height:68px}.home-hero .hero-build-caption{right:14px;bottom:auto;top:17px;font-size:9px}.home-hero .hero-art img{animation:none!important}.home-hero .hero-veil{z-index:2}html.hero-build-mode .home-hero .hero-art{-webkit-mask-image:radial-gradient(ellipse 80px 153px at 43% 47%,#000 0 62%,rgba(0,0,0,.8) 82%,transparent 100%);mask-image:radial-gradient(ellipse 80px 153px at 43% 47%,#000 0 62%,rgba(0,0,0,.8) 82%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.mega-preview,.mega-preview-item{transition:none!important}.home-hero .hero-pixel-canvas,.home-hero .hero-build-caption{display:none!important}html.hero-build-mode .home-hero .hero-art{-webkit-mask-image:none!important;mask-image:none!important}}


/* Prompt 12 / 15-second layered Hero world construction.
   Source assets: the exact approved new panorama and transparent traveler.
   Never move, pixelate, fade, or animate the traveler. */
body.home-page main{animation:none!important}
.home-hero{isolation:isolate;background:#091820}
.home-hero .hero-art{z-index:0;overflow:hidden;-webkit-mask-image:none!important;mask-image:none!important}
.home-hero .hero-art .hero-world-img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;animation:none!important;transform:none!important;
  filter:none!important;
}
html.hero-build-mode .home-hero .hero-art .hero-world-img{opacity:0!important}
.home-hero .hero-pixel-canvas{z-index:1;pointer-events:none;opacity:0}
html.hero-build-mode .home-hero .hero-pixel-canvas{opacity:1}
.home-hero .hero-veil{z-index:2;pointer-events:none}
.home-hero .living-hero-layers{display:none!important}
.home-hero .hero-character-layer{
  position:absolute;left:55%;bottom:-2%;height:102%;width:auto;
  z-index:4;pointer-events:none;user-select:none;overflow:visible;
  animation:none!important;transform:none!important;filter:none!important;
}
.home-hero .hero-traveler-img{
  display:block;height:100%;width:auto;max-width:none;
  object-fit:contain;opacity:1!important;
  animation:none!important;transform:none!important;filter:none!important;
}
.home-hero .hero-content{z-index:5!important}
.home-hero .hero-build-caption{z-index:6;opacity:0}
html.hero-build-mode .home-hero .hero-build-caption{opacity:1}
@media(max-width:850px){
  .home-hero .hero-character-layer{left:54%;height:91%;bottom:-2%}
}
@media(max-width:600px){
  .home-hero{min-height:840px}
  .home-hero .hero-content{align-items:flex-start;padding:150px 0 255px}
  .home-hero .hero-art .hero-world-img{object-position:72% 50%}
  .home-hero .hero-character-layer{height:35%;left:40%;bottom:0}
  .home-hero .hero-build-caption{top:12px;right:12px;bottom:auto}
  .home-hero .hero-veil{background:linear-gradient(180deg,rgba(5,15,20,.10) 0%,rgba(5,15,20,.12) 20%,rgba(5,15,20,.69) 49%,rgba(5,15,20,.22) 100%)}
}
@media(prefers-reduced-motion:reduce){
  html.hero-build-mode .home-hero .hero-art .hero-world-img{opacity:1!important}
  .home-hero .hero-pixel-canvas,.home-hero .hero-build-caption{display:none!important}
}

/* Resilient Hero image loading: fallback restores the bundled original illustration. */
.home-hero.hero-media-fallback .hero-art{opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
.home-hero.hero-media-fallback .hero-art .hero-world-img{opacity:1!important}
.home-hero.hero-media-fallback .hero-character-layer{display:none!important}
.home-hero.hero-media-fallback .hero-pixel-canvas,.home-hero.hero-media-fallback .hero-build-caption{display:none!important}
