@property --d-bg-core   { syntax: '<color>'; inherits: true; initial-value: #FAF7EF; }
@property --d-bg-base   { syntax: '<color>'; inherits: true; initial-value: #F3EFE6; }
@property --d-bg-edge   { syntax: '<color>'; inherits: true; initial-value: #DACFB8; }
@property --d-face-top  { syntax: '<color>'; inherits: true; initial-value: #FF7A5C; }
@property --d-face-mid  { syntax: '<color>'; inherits: true; initial-value: #F45D3B; }
@property --d-face-bot  { syntax: '<color>'; inherits: true; initial-value: #D8431F; }
@property --d-mark      { syntax: '<color>'; inherits: true; initial-value: #B5350F; }
@property --d-glow      { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --bg:   #F3EFE6;     --ink:  #2A2350;
    --d-bg-core: #FAF7EF;
  --d-bg-base: #F3EFE6;
  --d-bg-edge: #DACFB8;
  --d-vignette-edge-stop: 100%;
  --d-face-top: #FF7A5C;
  --d-face-mid: #F45D3B;
  --d-face-bot: #D8431F;
  --d-face-border: #7a2410;
  --d-mark: #B5350F;
  --d-mark-shadow-lo: rgba(255, 255, 255, 0.6);
  --d-mark-shadow-hi: rgba(0, 0, 0, 0.5);
  --d-press-depth: 9px;

    --d-grain: 0;
  --d-skew: 0deg;
  --d-offset-x: 0px;
  --d-idle-amp: 1;

    --d-glow: 0;

    --igr-settle: 0px;

    --igr-rest-tf: translateX(var(--d-offset-x, 0px))
    rotate(calc(var(--d-skew, 0deg) + var(--m-tilt, 0) * 0.6deg));

    --d-anim: 0;
  --evo-transition-dur: 1.4s;

    --m-echo: 0;              --m-off-origin: 0;        --m-off-angle: 0deg;      --m-thin-ring: 0;         --m-reverse: 0;           --m-after-image: 0;       --m-sticky: 0;            --m-mark-waver: 0;        --m-breath: 0;            --m-late: 0;              --m-lurch: 0;             --m-tilt: 0;              --m-broken-vignette: 0;   --m-side-angle: 0deg;     --m-grain-wake: 0;        --m-one-sided: 0;         --m-cool: 0;              --m-gloss: 0;             --m-depth-sink: 0;          --m-companion: 0;         --m-static: 0;            --m-list: 0;              --m-lapse: 0;             --m-stir: 0;              --m-revenant: 0;        }

* { box-sizing: border-box; }

.igori-mark, .igori-mark * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
::selection { background: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--d-bg-base, var(--bg));
  background-image:
        radial-gradient(122% 114% at 50% 42%,
      var(--d-bg-core, #FAF7EF) 0%,
      var(--d-bg-base, var(--bg)) 42%,
      var(--d-bg-edge, #DACFB8) var(--d-vignette-edge-stop, 100%));
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
    -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;     transition:
    --d-bg-core calc(var(--d-anim) * var(--evo-transition-dur)) ease,
    --d-bg-base calc(var(--d-anim) * var(--evo-transition-dur)) ease,
    --d-bg-edge calc(var(--d-anim) * var(--evo-transition-dur)) ease,
    background-color calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bg-ripple-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .bg-ripple-canvas { opacity: 0; }
}

.lobby {
  position: relative;
  z-index: 1;                   min-height: 100vh;
  /* svh (static SMALL viewport) so the hero's scroll-down hint stays visible on
     first load, when Chrome's toolbar is showing. Static like the editorial
     pages, so the toolbar no longer resizes the hero and pushes content up/down
     (the dynamic dvh did that). The editorial pages use lvh instead, to fill the
     expanded state where the content is read; the hero stays svh to keep the
     hint on-screen at rest. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-right))
           calc(24px + env(safe-area-inset-bottom))
           calc(24px + env(safe-area-inset-left));
}

.button-mount {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-mount .zc-round {
    --rnd-top: var(--d-face-top, #FF7A5C);
  --rnd-mid: var(--d-face-mid, #F45D3B);
  --rnd-bot: var(--d-face-bot, #D8431F);
  --rnd-border: var(--d-face-border, #7a2410);
  --rnd-press-depth: var(--d-press-depth, 9px);
  --rnd-specular: var(--d-specular,
    inset 0 10px 16px -4px rgba(255, 255, 255, 0.55),       inset 0 3px 2px rgba(255, 255, 255, 0.5));              transition:
    --d-face-top calc(var(--d-anim) * var(--evo-transition-dur)) ease,
    --d-face-mid calc(var(--d-anim) * var(--evo-transition-dur)) ease,
    --d-face-bot calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.button-mount .zc-round:not(.zc-round--expanded):not(:active) .zc-round__face:not(.igr-spring) {
    transform: var(--igr-rest-tf);
  transition: transform calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.evo-grain {
  position: fixed;
  inset: 0;
  z-index: 2;                   pointer-events: none;
  opacity: var(--d-grain, 0);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  transition: opacity calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.button-mount .zc-round:not(.zc-round--expanded):active .zc-round__face,
.button-mount .zc-round:not(.zc-round--expanded).zc-round--press .zc-round__face,
.button-mount .zc-round:not(.zc-round--expanded).zc-fx-pressed .zc-round__face {
    transform:
    var(--igr-rest-tf)
    translate(var(--press-ox, 0px), calc(var(--rnd-press-depth) + var(--press-oy, 0px) + var(--igr-settle, 0px)))
    scale(0.955);
}

.button-mount .zc-round__face.igr-spring {
    animation: igr-spring var(--igr-spring-dur, 0.50s) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
@keyframes igr-spring {
  0%   { transform: var(--igr-rest-tf) translate(var(--rel-x, 0px), var(--rel-y, 0px)) scale(0.955); }
  38%  { transform: var(--igr-rest-tf) translate(calc(var(--rel-x, 0px) * -0.20), calc(var(--rel-y, 0px) * -0.20)) scale(1.045); }
  62%  { transform: var(--igr-rest-tf) translate(calc(var(--rel-x, 0px) * 0.085), calc(var(--rel-y, 0px) * 0.085)) scale(0.984); }
  82%  { transform: var(--igr-rest-tf) translate(calc(var(--rel-x, 0px) * -0.03), calc(var(--rel-y, 0px) * -0.03)) scale(1.006); }
  100% { transform: var(--igr-rest-tf) translate(0px, 0px) scale(1); }
}

.zc-round__face .igori-mark {
  width: 62%;
  height: 62%;
  display: block;
    background-color: var(--d-mark, #B5350F);
  -webkit-mask: url(/assets/igori_logo.svg) center / contain no-repeat;
          mask: url(/assets/igori_logo.svg) center / contain no-repeat;
  filter:
    drop-shadow(0 1.1px 0.4px var(--d-mark-shadow-lo, rgba(255, 255, 255, 0.6)))       drop-shadow(0 -1px 0.4px var(--d-mark-shadow-hi, rgba(0, 0, 0, 0.5)));           pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition:
    filter 0.08s ease,
    background-color calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.zc-round:not(.zc-round--expanded):active .zc-round__face .igori-mark,
.zc-round:not(.zc-round--expanded).zc-round--press .zc-round__face .igori-mark,
.zc-round:not(.zc-round--expanded).zc-fx-pressed .zc-round__face .igori-mark {
  filter:
    drop-shadow(0 1.1px 0.4px rgba(255, 255, 255, 0.22))     drop-shadow(0 -1px 0.4px var(--d-mark-shadow-hi, rgba(0, 0, 0, 0.5)));
}

.igr-idle-drift .zc-round__face:not(.igr-spring) {
  animation: igr-idle 9s ease-in-out infinite;
}
@keyframes igr-idle {
  0%   { transform: var(--igr-rest-tf) translate(0px, 0px); }
  25%  { transform: var(--igr-rest-tf) translate(calc(1.3px * var(--d-idle-amp, 1)), calc(-1.1px * var(--d-idle-amp, 1))); }
  50%  { transform: var(--igr-rest-tf) translate(calc(-0.9px * var(--d-idle-amp, 1)), calc(1.4px * var(--d-idle-amp, 1))); }
  75%  { transform: var(--igr-rest-tf) translate(calc(1.1px * var(--d-idle-amp, 1)), calc(0.7px * var(--d-idle-amp, 1))); }
  100% { transform: var(--igr-rest-tf) translate(0px, 0px); }
}

body.evo-on .zc-round__face .igori-mark {
  animation: igr-mark-waver 7s ease-in-out infinite;
}
@keyframes igr-mark-waver {
  0%, 100% { translate: 0 0; }
  33%  { translate: calc(0.6px * var(--m-mark-waver, 0)) calc(-0.5px * var(--m-mark-waver, 0)); }
  66%  { translate: calc(-0.5px * var(--m-mark-waver, 0)) calc(0.5px * var(--m-mark-waver, 0)); }
}

body.evo-on .button-mount .zc-round__face { position: relative; }
body.evo-on .button-mount .zc-round__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    rgba(180, 90, 60, calc(0.14 * var(--m-after-image, 0))) 0%,
    transparent 62%);
  opacity: var(--m-after-image, 0);
  translate: calc(2px * var(--m-after-image, 0)) calc(2.5px * var(--m-after-image, 0));
  transition: opacity 0.5s ease, translate 0.5s ease;
  z-index: -1;
}

body.evo-on .button-mount .zc-round__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: plus-lighter;

  background: radial-gradient(circle at 50% 47%,
    rgba(255, 255, 255, calc(0.75 * var(--d-glow, 0)))         0%,
    rgba(255, 247, 205, calc(0.62 * var(--d-glow, 0)))         calc(14% + 16% * var(--d-glow, 0)),
    rgba(255, 206, 120, calc(0.46 * var(--d-glow, 0)))         calc(34% + 18% * var(--d-glow, 0)),
    rgba(255, 150,  60, calc(0.30 * var(--d-glow, 0)))         calc(60% + 16% * var(--d-glow, 0)),
    transparent                                                 92%);
  opacity: var(--d-glow, 0);
  transition: opacity calc(var(--d-anim) * var(--evo-transition-dur)) ease,
              background calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

body.evo-on .button-mount .zc-round:not(.zc-round--expanded) {
  animation: igr-breath 6s ease-in-out infinite;
}
@keyframes igr-breath {
  0%, 100% { scale: 1; }
  50% { scale: calc(1 + 0.012 * var(--m-breath, 0)); }
}

body.evo-on .button-mount .zc-round { --rnd-press-depth: calc(var(--d-press-depth, 9px) + var(--m-depth-sink, 0) * 1.4px); }

body.evo-on .bg-ripple-layer::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(var(--m-side-angle, 0deg),
    rgba(40, 34, 28, calc(0.06 * var(--m-broken-vignette, 0) + 0.05 * var(--m-one-sided, 0))) 0%,
    transparent 60%);
  opacity: 1;
  transition: background 0.8s ease;
}

.evo-grain {

  opacity: calc(var(--d-grain, 0) + 0.05 * var(--m-grain-wake, 0));
}
body.evo-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(120% 120% at 50% 30%,
      rgba(255, 180, 120, calc(0.05 * var(--m-lurch, 0))) 0%, transparent 70%),
    linear-gradient(rgba(120, 150, 175, calc(0.05 * var(--m-cool, 0))),
      rgba(120, 150, 175, calc(0.05 * var(--m-cool, 0)))),
    linear-gradient(rgba(255, 255, 255, calc(0.04 * var(--m-gloss, 0))),
      transparent 50%);
  mix-blend-mode: soft-light;
  transition: background 1.2s ease;
}

body.evo-on::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:

    radial-gradient(40% 40% at 38% 58%,
      rgba(60, 55, 70, calc(0.05 * var(--m-companion, 0))) 0%, transparent 70%),

    linear-gradient(rgba(90, 95, 105, calc(0.04 * var(--m-static, 0))),
      rgba(90, 95, 105, calc(0.04 * var(--m-static, 0)))),

    linear-gradient(var(--m-side-angle, 0deg),
      rgba(35, 30, 26, calc(0.06 * var(--m-list, 0))) 0%, transparent 55%),

    radial-gradient(50% 50% at 50% 48%,
      rgba(70, 62, 58, calc(0.05 * var(--m-revenant, 0))) 0%, transparent 66%);
  mix-blend-mode: multiply;
  transition: background 1.4s ease;
}

body.evo-on .evo-glow-bloom {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: normal;

  background:
    radial-gradient(circle at 50% 50%,
      transparent                          calc(70% - 20% * var(--d-glow, 0)),
      #120B06                              calc(88% - 22% * var(--d-glow, 0)),
      #120B06                              100%),
    radial-gradient(circle at 50% 50%,
      #FFFFFF                              0%,
      #FFE9A6  calc(8%  + 6%  * var(--d-glow, 0)),
      #FF9E3D  calc(20% + 8%  * var(--d-glow, 0)),
      #F5631C  calc(33% + 8%  * var(--d-glow, 0)),
      #140D07  calc(90% - 28% * var(--d-glow, 0)),
      #140D07  100%);
  opacity: var(--d-glow, 0);
  transition: opacity calc(var(--d-anim) * var(--evo-transition-dur)) ease,
              background calc(var(--d-anim) * var(--evo-transition-dur)) ease;
}

.evo-calm-btn {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 50;
  display: none;                   appearance: none;
  border: 0;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  padding: 0;
  font: 600 13px 'Fredoka', system-ui, sans-serif;
  line-height: 26px;
  text-align: center;
  color: rgba(40, 35, 30, 0.5);
  background: rgba(120, 116, 110, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease, opacity 0.18s ease;
  opacity: 0.55;
}
body.evo-on .evo-calm-btn { display: block; }
.evo-calm-btn:hover { opacity: 1; color: rgba(40, 35, 30, 0.85); background: rgba(120, 116, 110, 0.28); }
.evo-calm-btn:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
  .igr-idle-drift .zc-round__face { animation: none; }
    .evo-grain { opacity: 0; }
  .button-mount .zc-round:not(.zc-round--expanded):not(:active) .zc-round__face:not(.igr-spring) {
    transform: none;
  }
    body.evo-on .zc-round__face .igori-mark { animation: none; }
  body.evo-on .button-mount .zc-round:not(.zc-round--expanded) { animation: none; }
  body.evo-on .button-mount .zc-round__face::before { opacity: 0; translate: 0 0; }
}