/* =========================================================================
   Digital Witchcraft — site styles
   PC  (> 820px): [left menu] [content] [right menu] / [footer]
   SP  (<= 820px): [header #080808 + hamburger] / [content] / [footer]
   ========================================================================= */

:root {
  --text: #b9000b;          /* content text */
  --footer-text: #b9000b;   /* footer text */
  --sp-header-bg: #080808;  /* smartphone header */
  --black: #000000;

  --footer-h: 56px;
  --sp-header-h: 60px;

  /* Width of each PC menu column. The content column always gets the rest.
     Raise or lower the middle value to make the menus bigger or smaller. */
  --menu-w: clamp(180px, 25vw, 480px);

  /* Height of the PC menu columns (viewport minus footer). */
  --menu-h: calc(100vh - var(--footer-h));

  /* Panel see-through amount. (A lighter version that was tried: 0.04 and 6px.) */
  --panel-bg: rgba(0, 0, 0, 0.08);   /* 8% black; the blur does the rest */
  --panel-blur: 10px;
  --panel-radius: 18px;
  --panel-max-w: 1400px;   /* panel fills the content area up to this width */
}
@supports (height: 100dvh) {
  :root { --menu-h: calc(100dvh - var(--footer-h)); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--black);
}

body {
  color: var(--text);
  font-family: "Spectral SC", Georgia, "Times New Roman", serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { border: 0; }

a { color: var(--text); }

.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;
}

/* ---------- Page grid ---------- */

.site {
  display: grid;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: var(--menu-w) minmax(0, 1fr) var(--menu-w);
  grid-template-rows: minmax(0, 1fr) var(--footer-h);
  grid-template-areas:
    "left main right"
    "foot foot foot";
  overflow: hidden;
}

/* ---------- PC menus ----------
   Each column is a fixed width (--menu-w). The three graphics are each
   exactly one third of the column height, so together they fill it top to
   bottom with no gaps. object-fit: cover scales them up without stretching
   (aspect ratio kept); whatever is wider than the column is trimmed evenly
   from the left and right edges. Change --menu-focus to trim from one side
   instead (e.g. "left center" or "30% center"). */

.pc-menu {
  --menu-focus: center center;
  position: relative;
  width: var(--menu-w);
  min-width: 0;
  height: var(--menu-h);
  background: var(--black);
  overflow: hidden;
}
.pc-menu--left  { grid-area: left; }
.pc-menu--right { grid-area: right; }

.pc-menu__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.pc-menu img {
  display: block;
  flex: none;
  width: 100%;
  height: calc(var(--menu-h) / 3);
  object-fit: cover;
  object-position: var(--menu-focus);
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Clickable areas laid over the graphics. The top part links to the first
   item (Home / About), the bottom part to the second (Products / Contact).
   Adjust --split if the artwork places the divide elsewhere. */
.pc-menu { --split: 50%; }
.pc-menu__link {
  position: absolute;
  left: 0; right: 0;
  display: block;
  z-index: 2;
}
.pc-menu__link--first  { top: 0; height: var(--split); }
.pc-menu__link--second { top: var(--split); bottom: 0; }
.pc-menu__link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -4px;
}

/* ---------- Main area ---------- */

.main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--black);
}

/* ---------- Main graphic (from main_graphic.html) ----------
   Identical math to the original, but measured against the box it lives in
   (container query units) instead of the whole window, so it stays correct
   between the PC menus and below the SP header. */

.graphic {
  --ground: #000000;
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ground);
}

.graphic .frame {
  position: relative;
  --crop-top: 0.16;
  --crop-bottom: 0;
  --visible: calc(1 - var(--crop-top) - var(--crop-bottom));
  --size: min(calc(100vh / var(--visible)), 100vw);
  --size: min(calc(100cqh / var(--visible)), 100cqw);
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) * var(--crop-top) * -1);
  margin-bottom: calc(var(--size) * var(--crop-bottom) * -1);
  /* Centre the graphic on its PENTAGRAM, so it lines up with the pentagram
     in page_header.png (which is centred). In 30s.gif the pentagram's axis
     is at 47.55% of the width, i.e. 2.45% left of centre, so the whole
     graphic (grid + red art together, unchanged relative to each other) is
     shifted right by 2.45% of its size. Same on phones and PC. */
  transform: translateX(calc(var(--size) * 0.02452));
}

.graphic .stage {
  position: absolute;
  left: 10.063%;
  top: 20.080%;
  width: 74.554%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ground);
  z-index: 1;
}

.graphic .frame img { display: block; max-width: none; }

.graphic .bg,
.graphic .chars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.graphic .bg      { z-index: 1; }
.graphic .chars   { z-index: 2; pointer-events: none; }

.graphic .overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 5%;
  width: 100%;
  height: auto;
  pointer-events: none;
  clip-path: inset(calc(var(--crop-top) * 100%) 0 calc(var(--crop-bottom) * 100%) 0);
}

/* Phones: enlarge the graphic (proportions kept) so the artwork fills the
   screen width, with a sliver of space on each side. If the screen is short
   and wide, it still fits the height instead. */
@media (max-width: 820px) {
  .graphic {
    /* Keep the grid cell the size of the screen so the enlarged graphic is
       centred rather than pinned to the left edge. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .graphic .frame {
    --size: min(calc(100vh / var(--visible)), calc(100vw * 1.30));
    --size: min(calc(100cqh / var(--visible)), calc(100cqw * 1.30));
    justify-self: center;
    align-self: center;
    /* Phones: centre the whole artwork (grid + all red circuit lines, which
       together span 10.06%..85.75% of the GIF) so the left and right margins
       are equal. The pentagram ends up < 2px from exact centre. */
    transform: translateX(calc(var(--size) * 0.02092));
  }
}

/* Phones: the animated overlay is a video (30s_mobile.mp4) instead of the
   GIF. It is the same animation on black; "screen" blending makes the black
   disappear, so it layers exactly like the transparent GIF. */
.graphic .overlay-video { display: none; }
@media (max-width: 820px) {
  .graphic img.overlay { display: none; }
  .graphic .overlay-video {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 5%;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
    pointer-events: none;
    background: transparent;
    mix-blend-mode: screen;
    clip-path: inset(calc(var(--crop-top) * 100%) 0 calc(var(--crop-bottom) * 100%) 0);
  }
}

/* ---------- Content pages: graphic as background, panel on top ---------- */

/* The panel stays put on screen: it sits near the top of the content area and
   can never extend past the footer. If its content is taller than the space,
   the text scrolls inside the panel (scrollbar hidden) while the panel and
   the background stay where they are. */
.page-scroll {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--gut-y) calc(var(--menu-w) + var(--gut-x));
}

/* Margin between the content area's edges and the panel. Shared by the
   panel's position and the clip below so the two always match exactly. */
.main {
  --gut-y: clamp(16px, 4vw, 56px);
  --gut-x: clamp(16px, 2vw, 32px);
}

/* On About, Contact and Products the whole graphic is shown (not trimmed)
   and softened ONCE, evenly, across the entire page: the graphic itself is
   blurred, and a single layer of the same translucent black covers the full
   width, menus included. The menus and the panel add no blur or tint of
   their own here, so there are no seams or edges where layers meet. */
.page-about .graphic,
.page-contact .graphic,
.page-products .graphic {
  filter: blur(var(--panel-blur)) saturate(115%);
}
.page-about .main::before,
.page-contact .main::before,
.page-products .main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--panel-bg);
}
.page-about .panel,
.page-contact .panel,
.page-products .panel {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
@media (min-width: 821px) {
  /* Home: menus fully transparent (no tint, no blur) over the sharp graphic. */
  .page-home .pc-menu,
  .page-about .pc-menu,
  .page-contact .pc-menu,
  .page-products .pc-menu {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.panel {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: var(--panel-max-w);
  max-height: 100%;       /* bottom edge stops above the footer */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;
  padding: clamp(20px, 3.2vw, 44px);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(115%);
  backdrop-filter: blur(var(--panel-blur)) saturate(115%);
  border-radius: var(--panel-radius);
  border: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.panel::-webkit-scrollbar { display: none; }  /* Chrome, Edge, Safari */

/* Every content panel (About, Contact, Products) runs the full height of the
   content area, from the top margin down to just above the footer, so it
   always covers the background graphic. Text inside stays where it was. */
.panel { height: 100%; }

/* Products: "Coming Soon" layout inside the full-height panel. */
.page-products .panel {
  display: flex;
  flex-direction: column;
}
.page-products .section {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* "Coming Soon" sits in the upper part of the panel, just below the header. */
.page-products .coming-soon {
  margin: 0 0 auto !important;
  padding: clamp(8px, 4vh, 48px) 0 0 !important;
}

/* Browsers without backdrop-filter get a darker panel so text stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: rgba(0, 0, 0, 0.82); }
}

.section + .section { margin-top: clamp(32px, 5vw, 56px); }

.section-header {
  display: block;
  width: 33.333%;          /* one third of the panel width */
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto;
  margin: 0 0 clamp(18px, 2.6vw, 28px);
}

.section h1,
.section h2 {
  margin: 0 0 0.6em;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.section p {
  margin: 0 0 1.1em;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}
.section p:last-child { margin-bottom: 0; }

.coming-soon {
  text-align: center;
  font-size: clamp(2rem, 6vw, 3.4rem) !important;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: clamp(24px, 6vw, 64px) 0;
  margin: 0 !important;
}

/* ---------- Contact form ---------- */

.contact-form { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; }

.field label {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(185, 0, 11, 0.45);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field select option { background: #000; color: var(--text); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(185, 0, 11, 0.45); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(185, 0, 11, 0.22);
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
}

/* Honeypot — hidden from people, visible to bots. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.btn {
  justify-self: start;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--text); color: #000; outline: none; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.form-status {
  min-height: 1.5em;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.form-status.is-error { color: #ff7a5c; }

/* ---------- PC menus: start all menu GIFs together ----------
   While html has .menus-syncing, the menu images are hidden; site.js shows
   them all in the same frame once every one is ready, so their animations
   stay in step. Fail-safe: they appear after 4s even if the script never runs. */
@keyframes dw-reveal { to { visibility: visible; } }
html.menus-syncing .pc-menu img {
  visibility: hidden;
  animation: dw-reveal 0s linear 4s forwards;
}

/* ---------- Footer ---------- */

.footer {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding: 0 16px;
  background: var(--black);
  color: var(--footer-text);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(185, 0, 11, 0.35);
  text-align: center;
}
.footer a { color: var(--footer-text); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }
.footer nav { display: flex; gap: 18px; }

/* ---------- SP header & menu (hidden on PC) ---------- */

.sp-header { display: none; }
.sp-menu   { display: none; }

@media (max-width: 820px) {
  :root {
    --footer-h: 52px;
    --menu-w: 0px;                      /* no side menus on phones */
    /* Phones only: lighter panel so more of the graphic shows through. */
    --panel-bg: rgba(0, 0, 0, 0.03);
    --panel-blur: 6px;
  }

  .site {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--sp-header-h) minmax(0, 1fr) var(--footer-h);
    grid-template-areas:
      "head"
      "main"
      "foot";
  }

  .pc-menu { display: none; }

  .sp-header {
    grid-area: head;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--sp-header-bg);
    position: relative;
    z-index: 10;
  }

  .sp-brand {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
  }

  .sp-menu-toggle {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-right: -8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .sp-menu-toggle img { display: block; width: 34px; height: auto; }
  .sp-menu-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }

  /* Full-screen overlay menu: four graphics stacked with no gaps, each one
     quarter of the screen height and the full width, so together they fill
     the whole screen. object-fit: cover keeps each image's proportions;
     anything that doesn't fit is trimmed evenly from the edges. Change
     --sp-menu-focus (e.g. "center top") to trim from a different side. */
  .sp-menu {
    --sp-menu-focus: center center;
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .sp-menu[hidden] { display: none; }

  .sp-menu__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    list-style: none;
    line-height: 0;
    font-size: 0;
  }
  .sp-menu__list li { flex: 1 1 0; min-height: 0; margin: 0; padding: 0; }
  .sp-menu__list a { display: block; width: 100%; height: 100%; margin: 0; padding: 0; line-height: 0; }
  .sp-menu__list a:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
  .sp-menu__list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--sp-menu-focus);
    margin: 0;
    padding: 0;
  }

  .sp-menu__close {
    position: fixed;
    top: 6px; right: 8px;
    z-index: 101;
    width: 48px; height: 48px;
    font: 600 2rem/1 "Spectral SC", Georgia, serif;
    color: var(--text);
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }
  .sp-menu__close:focus-visible { outline: 2px solid var(--text); }

  html.menu-open, html.menu-open body { overflow: hidden; }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .btn { justify-self: stretch; }
  .footer { font-size: 0.85rem; gap: 4px 16px; }
  .footer nav { display: none; }
}

/* ---------- PC contact page: form fits the window height ----------
   The panel is capped at the space above the footer; spacing, padding and
   the message box shrink to fit inside it instead of overflowing. Only on
   very short windows does the panel fall back to scrolling.
   (On phones the form keeps its full size and scrolls inside the panel,
   with no visible scrollbar.) */
@media (min-width: 821px) {
  .page-contact .main { --gut-y: clamp(12px, 4vh, 56px); }
  .page-contact .panel {
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 3.4vh, 44px) clamp(20px, 3.2vw, 44px);
  }
  .page-contact .section {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .page-contact .section-header { margin-bottom: clamp(8px, 2vh, 28px); flex: none; }
  .page-contact .section h1 {
    font-size: clamp(1.4rem, min(3.2vw, 4.2vh), 2.3rem);
    margin-bottom: clamp(6px, 1.6vh, 18px);
    flex: none;
  }
  .page-contact .contact-form {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vh, 20px);
  }
  .page-contact .contact-form > * { flex: none; }
  .page-contact .field { gap: clamp(4px, 0.8vh, 8px); }
  .page-contact .field input,
  .page-contact .field select { padding-top: clamp(7px, 1.2vh, 12px); padding-bottom: clamp(7px, 1.2vh, 12px); }
  .page-contact .btn { align-self: flex-start; padding-top: clamp(8px, 1.2vh, 12px); padding-bottom: clamp(8px, 1.2vh, 12px); }
  .page-contact .form-status { min-height: 0; }

  /* The message box is the part that gives way. */
  .page-contact .contact-form > .field--grow {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .page-contact .field--grow textarea {
    flex: 1 1 180px;
    height: 180px;
    min-height: 64px;
    resize: none;
  }
}


/* ---------- PC: main graphic fills the content area ----------
   Same math as the original, but "cover" instead of "fit": the graphic grows
   until it fills the whole content column top to bottom. Whatever is wider
   than the column is trimmed evenly from the left and right. Applies to the
   home graphic and the background behind the panels. (Phones keep the
   original fit-inside behaviour so the pentagram isn't cut off.) */
@media (min-width: 821px) {
  /* The content layer runs the full width of the screen, underneath the
     menus, so the graphic shows through the menus' clear backgrounds. The
     panel still sits between the menus (see --menu-w in the gutters). */
  .main {
    grid-area: 1 / 1 / 2 / -1;
    z-index: 0;
  }
  .pc-menu {
    z-index: 3;
    /* Same translucent black and blur as the content panel, so the part of
       the graphic that runs under the menus stays visible, softened. */
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(115%);
    backdrop-filter: blur(var(--panel-blur)) saturate(115%);
  }

  .graphic {
    /* Keep the grid cell the size of the content area so the oversized
       graphic is centered in it rather than pinned to the left edge. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .graphic .frame {
    /* Size is based on the space between the menus, exactly as before. */
    --size: max(calc(100vh / var(--visible)), calc(100vw - 2 * var(--menu-w)));
    --size: max(calc(100cqh / var(--visible)), calc(100cqw - 2 * var(--menu-w)));
    justify-self: center;
    align-self: center;
    /* Pentagram centred (see .graphic .frame above). */
    transform: translateX(calc(var(--size) * 0.02452));
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}