/* =========================
   INVOKE — ROOT SCALE
   ========================= */

:root{
  /* ===== wide screen scaling ===== */
  /*
    1   = old behavior, stops at the 1920px design size
    1.5 = continues growing to 150% of the old max caps
    2   = continues growing to 200% of the old max caps
  */
  --wide-scale: 2;

  /* split artwork proportions */
  --invoke-stacked-track-w: clamp(260px, calc(1031 / 1920 * 100vw), 1031px);
  --invoke-top-to-track-ratio: 1.359;

  /* spacing */
  --invoke-gap-xs: clamp(6px, calc(10 / 1920 * 100vw), 10px);
  --invoke-gap-sm: clamp(10px, calc(14 / 1920 * 100vw), 14px);
  --invoke-gap-md: clamp(16px, calc(24 / 1920 * 100vw), 24px);
  --invoke-gap-lg: clamp(20px, calc(32 / 1920 * 100vw), 32px);

  /* type */
  --invoke-label-size: clamp(13px, calc(15 / 1920 * 100vw), 15px);

  /* form controls */
  --invoke-input-pad-y: clamp(8px, calc(10 / 1920 * 100vw), 10px);
  --invoke-input-pad-x: clamp(12px, calc(16 / 1920 * 100vw), 16px);
  --invoke-textarea-min-h: clamp(110px, calc(130 / 1920 * 100vw), 130px);

  /* button */
  --invoke-btn-h: clamp(42px, calc(46 / 1920 * 100vw), 46px);
  --invoke-btn-min-w: clamp(180px, calc(220 / 1920 * 100vw), 220px);
  --invoke-btn-pad-x: clamp(16px, calc(20 / 1920 * 100vw), 20px);
  --invoke-btn-font-size: clamp(13px, calc(15 / 1920 * 100vw), 15px);

  /* stacked spacing */
  --invoke-stacked-panel-mt: clamp(0px, calc(20 / 1499 * 100vw), 35px);
  --invoke-stacked-bot-mt: clamp(-40px, calc(-60px + (35 / 1499 * 100vw)), -10px);
}


/* =========================================
   WIDE SCREEN UPSCALE ONLY
   nothing changes at or below 1920px
   ========================================= */

@media (min-width: 1920px){
  :root{
    /* split artwork proportions */
    --invoke-stacked-track-w: clamp(1031px, calc(1031 / 1920 * 100vw), calc(1031px * var(--wide-scale)));

    /* spacing */
    --invoke-gap-xs: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
    --invoke-gap-sm: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
    --invoke-gap-md: clamp(24px, calc(24 / 1920 * 100vw), calc(24px * var(--wide-scale)));
    --invoke-gap-lg: clamp(32px, calc(32 / 1920 * 100vw), calc(32px * var(--wide-scale)));

    /* type */
    --invoke-label-size: clamp(15px, calc(15 / 1920 * 100vw), calc(15px * var(--wide-scale)));

    /* form controls */
    --invoke-input-pad-y: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
    --invoke-input-pad-x: clamp(16px, calc(16 / 1920 * 100vw), calc(16px * var(--wide-scale)));
    --invoke-textarea-min-h: clamp(130px, calc(130 / 1920 * 100vw), calc(130px * var(--wide-scale)));

    /* button */
    --invoke-btn-h: clamp(46px, calc(46 / 1920 * 100vw), calc(46px * var(--wide-scale)));
    --invoke-btn-min-w: clamp(220px, calc(220 / 1920 * 100vw), calc(220px * var(--wide-scale)));
    --invoke-btn-pad-x: clamp(20px, calc(20 / 1920 * 100vw), calc(20px * var(--wide-scale)));
    --invoke-btn-font-size: clamp(15px, calc(15 / 1920 * 100vw), calc(15px * var(--wide-scale)));

    /* split artwork spacing */
    --invoke-stacked-panel-mt: clamp(35px, calc(35 / 1920 * 100vw), calc(35px * var(--wide-scale)));
    --invoke-stacked-bot-mt: clamp(-10px, calc(-10 / 1920 * 100vw), calc(-10px * var(--wide-scale)));
  }
}


/* =========================
   PAGE WRAP
   ========================= */

.invoke-page{
  width: min(100%, calc(var(--invoke-stacked-track-w) * var(--invoke-top-to-track-ratio)));
  margin: 0 auto;
}


/* =========================
   TEXT / ALERTS
   ========================= */

.invoke-intro,
.invoke-foot{
  text-align: center;
  margin: var(--invoke-gap-sm) 0 var(--invoke-gap-md);
}

.invoke-alert{
  max-width: clamp(320px, calc(760 / 1920 * 100vw), 760px);
  margin: var(--invoke-gap-sm) auto;
}

.invoke-alert .panel-glass__text{
  text-align: center;
}

@media (min-width: 1920px){
  .invoke-alert{
    max-width: clamp(760px, calc(760 / 1920 * 100vw), calc(760px * var(--wide-scale)));
  }
}


/* =========================
   STAGE
   ========================= */

.invoke-stage{
  width: 100%;
  margin: var(--invoke-gap-md) auto var(--invoke-gap-lg);
}

.invoke-stage__stacked{
  display: block;
  width: 100%;
}

.invoke-stage__stacked > *{
  position: relative;
  left: 50%;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-50%);
}


/* =========================
   ARTWORK
   ========================= */

.invoke-art{
  display: flex;
  justify-content: center;
  margin: 0;
}

.invoke-art img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border-radius: 0 !important;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.25))
    drop-shadow(0 0 8px rgba(255,255,255,0.04));
}


.invoke-panel{
  width: var(--invoke-stacked-track-w);
  pointer-events: auto;
}

.invoke-panel .panel-glass__inner{
  padding: var(--invoke-gap-sm) var(--invoke-gap-md);
}


/* =========================
   FORM
   ========================= */

.invoke-form{
  display: grid;
  gap: var(--invoke-gap-xs);
}

.invoke-form__field{
  display: grid;
  gap: 4px;
}

@media (min-width: 1920px){
  .invoke-form__field{
    gap: clamp(4px, calc(4 / 1920 * 100vw), calc(4px * var(--wide-scale)));
  }
}

.invoke-form__field span{
  font-family: "Cinzel", serif;
  font-size: var(--invoke-label-size);
  letter-spacing: 0.04em;
}

.invoke-form input,
.invoke-form textarea{
  width: 100%;
  padding: var(--invoke-input-pad-y) var(--invoke-input-pad-x);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #f4eee6;
  font: inherit;
}

@media (min-width: 1920px){
  .invoke-form input,
  .invoke-form textarea{
    border-radius: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
  }
}

.invoke-form textarea{
  min-height: var(--invoke-textarea-min-h);
  resize: none;
}

.invoke-form input:focus,
.invoke-form textarea:focus{
  outline: none;
  border-color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.09);
}


/* =========================
   ACTIONS / BUTTON
   ========================= */

.invoke-form__actions{
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.invoke-btn{
  appearance: none;
  min-width: var(--invoke-btn-min-w);
  min-height: var(--invoke-btn-h);
  padding: 0 var(--invoke-btn-pad-x);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #343540, #1c1e26);
  color: #f5efe4;
  font-family: "Cinzel", serif;
  font-size: var(--invoke-btn-font-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 16px rgba(0,0,0,0.25);
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.invoke-btn:hover{
  background: linear-gradient(180deg, #3f4150, #262833);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 24px rgba(0,0,0,0.35),
    0 0 12px rgba(180,150,255,0.15);
}

.invoke-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.2);
}


/* =========================
   HONEYPOT
   ========================= */

.invoke-form__trap{
  position: absolute;
  left: -99999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.invoke-panel--stacked{
  width: var(--invoke-stacked-track-w);
  margin-top: var(--invoke-stacked-panel-mt);
}

.invoke-art--bot{
  width: var(--invoke-stacked-track-w);
  margin-top: var(--invoke-stacked-bot-mt);
}

.invoke-art--top{
  width: calc(var(--invoke-stacked-track-w) * var(--invoke-top-to-track-ratio));
  max-width: none;
}

.invoke-panel--stacked .panel-glass__inner{
  padding: var(--invoke-gap-sm) var(--invoke-gap-md);
}


/* =========================
   SMALLER MOBILE
   ========================= */

@media (max-width: 640px){
  .invoke-btn{
    width: 100%;
    min-width: 0;
  }
}