/* ============================================================
   Arendia — the front page treatment (Chapter Two)
   ------------------------------------------------------------
   Shared by the two home pages: /index.html (public) and
   /veil-cpexfgiytl/index.html (behind the gate). Both link this file
   and /front/front.js after their own <style>, so a rule here wins on
   equal specificity. Nothing in here redeclares the page's :root; the
   palette is borrowed by name (--gold, --gold-bright, --gold-dim, --foam,
   --ink-dim, --serif, --body, --caps), which is the design protocol.

   What lives here
     1. the ground: the OOC treatment's drowned temple behind a
        transparent body, plus the embers front.js generates
     2. the rift overlay: geometry only; front.js builds the SVG
     3. the two tables and the FAQ, styled by POSITION inside their
        cards, because the Site Editor rewrites table cells without
        their classes on save
     4. the top buttons, sized from the viewport

   Deployed by front-deploy\Deploy Front Page.bat. Edit the copy in
   _deploy-arendiasl.com\front-deploy\front\, not on the server.
   ============================================================ */

/* ---- 1. the ground ------------------------------------------------
   Ground on html, layers on pseudo-elements, body transparent. Give the
   body a background here and it paints in front of every negative-z
   layer (learned 2026-09-06, page-ooc.css). The old page's backdrop
   divs are hidden rather than deleted so a page that still carries them
   needs no markup change. */
html{background:#04080b}
body{background:transparent !important}
.bg-field,.bg-tendrils,.motes{display:none !important}
html::before{
  content:'';position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:#04080b url(/auth/assets/gate-bg.webp) center/cover no-repeat;
}
html::after{
  content:'';position:fixed;left:0;right:0;bottom:0;height:72vh;z-index:-3;pointer-events:none;
  background:url(/auth/assets/gate-temple.webp) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 42%,#000 78%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 42%,#000 78%);
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 60% at 38% 46%,rgba(4,8,11,.58),transparent 72%);
}
/* embers at -1: under everything in flow, above the backdrop */
.embers{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;--rise:-130vh}
.ember{position:absolute;bottom:-30px;will-change:transform}
.ember i{display:block;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#fff3d6 0%,#ffc06a 38%,#f2761f 68%,rgba(190,48,8,0) 100%);
  animation:emFlick 1.7s ease-in-out infinite alternate,emSway 3.4s ease-in-out infinite alternate}
@keyframes emRise{to{transform:translateY(var(--rise))}}
@keyframes emFlick{0%{opacity:.16}100%{opacity:.95}}
@keyframes emSway{0%{transform:translateX(-8px)}100%{transform:translateX(8px)}}

/* ---- 2. the rift --------------------------------------------------
   The markup is one empty <div class="rift-overlay" data-rift data-slides
   data-icon-old data-icon-new>. front.js fetches the SVG named in
   data-rift, reads its viewBox, and sets --rift-tilt and --rift-aspect so
   any rift art lands about 15 degrees off vertical with its middle at
   --rift-x. Upload a larger or different rift and the treatment holds. */
.rift-overlay{
  position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;
  contain:strict;
  --rift-tilt:-46deg;            /* front.js overwrites from the art */
  --rift-aspect:1672/941;        /* front.js overwrites from the art */
  --rift-x:26%;
  --rift-len:132vh;
}
.rift-overlay:empty{display:none}
body.rift-behind .rift-overlay{z-index:-1}
#riftToggle .on-front,#riftToggle .on-behind{display:none}
body:not(.rift-behind) #riftToggle .on-front{display:inline}
body.rift-behind #riftToggle .on-behind{display:inline}
.rift-anchor{
  position:absolute;left:var(--rift-x);top:50%;
  width:var(--rift-len);aspect-ratio:var(--rift-aspect);
  transform:translate(-50%,-50%) rotate(var(--rift-tilt));
}
.rift-svg{width:100%;height:100%;display:block;overflow:visible}
.rift-light{mix-blend-mode:screen}
.band{fill:none;stroke:url(#riftBand);stroke-linejoin:round;stroke-linecap:round}
.band-wide{stroke-width:90;opacity:.20}
.band-mid {stroke-width:44;opacity:.34}
.band-in  {stroke-width:18;opacity:.55}
.band-lip {stroke-width:3;opacity:.95}
.rift-unrot{transform-box:view-box;transform-origin:50% 50%;transform:rotate(calc(-1 * var(--rift-tilt)))}
.slide{opacity:0;transition:opacity var(--fade,1.8s) ease-in-out}
.slide.on{opacity:1}

/* ---- 3. the tables and the FAQ ------------------------------------
   Dark tiles, not cream cards: this page is on the abyss. Cells are
   styled by position, since the editor writes <td> without classes. */
.brief{max-width:1140px;margin:0 auto;padding:0 24px}
.brief + .brief{margin-top:30px}
.card{
  background:rgba(10,20,26,.62);
  border:1px solid rgba(200,168,106,.32);
  border-radius:6px;padding:26px 28px 12px;
}
.card > p:first-of-type{
  font-family:var(--serif);font-size:26px;letter-spacing:.01em;
  color:var(--gold-bright);margin:0 0 6px;line-height:1.2;
}
.card > p:nth-of-type(2){font-family:var(--body);font-size:15px;color:var(--ink-dim);margin:0 0 18px}
.card .scroller,.card > table{overflow-x:auto}
.card table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:16px;background:none;border:0}
.card table th{
  font-family:var(--caps);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dim);text-align:left;font-weight:400;background:none;
  padding:0 18px 10px 0;border:0;border-bottom:1px solid rgba(200,168,106,.32);white-space:nowrap;
}
.card table td{
  padding:15px 18px 15px 0;vertical-align:top;color:var(--ink-dim);line-height:1.55;background:none;
  border:0;border-bottom:1px solid rgba(200,168,106,.13);
}
.card table tr:last-child td{border-bottom:none}
.card table td:first-child{
  font-family:var(--serif);font-size:20px;color:var(--gold-bright);
  white-space:nowrap;padding-right:26px;width:1%;
}
.card table td:nth-child(2){color:var(--foam);font-size:15px;padding-right:26px;width:26%}
.card table td .note,.card table td em{color:var(--ink-dim);font-size:14px;font-style:italic}

.faq{max-width:720px;margin:44px auto 0;padding:0 24px 90px;text-align:center}
.faq > p:first-of-type{
  font-family:var(--caps);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 6px;
}
.faq > p:nth-of-type(2){font-family:var(--body);font-size:15px;color:var(--ink-dim);margin:0 0 22px}
.qa{position:relative;padding:26px 0;border-top:1px solid rgba(200,168,106,.16)}
.qa > p:first-of-type{font-family:var(--serif);font-size:24px;color:var(--gold-bright);margin:0 0 10px}
.qa > p:nth-of-type(2){font-family:var(--body);font-size:17px;color:var(--ink-dim);line-height:1.7;margin:0 auto;max-width:60ch}
/* the icon shift front.js appends to the last question: out to the right */
.iconwrap{position:absolute;right:-250px;top:50%;transform:translateY(-50%);width:190px}
.iconshift{position:relative;width:150px;height:150px;margin:0 auto}
.iconshift img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:iconTurn 9s ease-in-out infinite}
.iconshift img:first-child{--a:1;--b:0}
.iconshift img:last-child{--a:0;--b:1;filter:drop-shadow(0 0 16px rgba(47,230,207,.45))}
@keyframes iconTurn{0%,38%{opacity:var(--a)} 55%,92%{opacity:var(--b)} 100%{opacity:var(--a)}}
@media(max-width:1240px){.iconwrap{position:static;transform:none;width:auto;margin-top:22px}}

/* the footer's two lines already exist on both pages; only the colour is ours */
footer .fine{color:var(--gold-dim)}

/* ---- 4. the top buttons -------------------------------------------- */
#topBtns{
  position:fixed;top:clamp(10px,1.6vw,18px);left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1vw,12px);
  width:max-content;max-width:calc(100vw - 24px);
}
#topBtns a{
  font-family:'Cormorant SC','Cinzel',Georgia,serif;
  font-size:clamp(10.5px,1.05vw,14px);letter-spacing:clamp(.12em,.2vw,.24em);text-transform:uppercase;
  color:#e8c45a;text-decoration:none;
  padding:clamp(6px,.7vw,9px) clamp(12px,1.6vw,22px);
  border:1px solid #c9a227;border-radius:2px;
  background:rgba(20,15,10,.72);backdrop-filter:blur(3px);transition:background .25s,color .25s;white-space:nowrap;
}
#topBtns a:hover{background:#c9a227;color:#140f0a}
/* a bar front.js made only to hold the rift toggle: bottom right, clear of any nav */
#topBtns.rift-only{top:auto;bottom:18px;left:auto;right:18px;transform:none}

@media(max-width:760px){
  .card table td:first-child{white-space:normal}
  .brief{padding:0 14px}
  .card{padding:20px 16px 8px}
}
@media(max-width:560px){
  #topBtns{gap:6px}
  #topBtns a{font-size:10.5px;letter-spacing:.12em;padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .iconshift img{animation:none}
  .iconshift img:last-child{opacity:1}
  .ember{animation:none !important;display:none}
}