/* Imported from ISWA src/components/Minaret3D.astro.
   Prefix component classes to isolate them from the app-card tilt styles. */
/* Line iswa-minaret-boil: three slightly different wobbles, swapped like animation frames. */
  .iswa-minaret-m3d-draw {
    animation: iswa-minaret-boil 0.36s steps(1) infinite;
  }
  .iswa-minaret-boil {
    position: absolute;
  }
  @keyframes iswa-minaret-boil {
    0% {
      filter: url(#m3d-boil-0);
    }
    33% {
      filter: url(#m3d-boil-1);
    }
    66% {
      filter: url(#m3d-boil-2);
    }
  }

  .iswa-minaret-m3d {
    position: relative;
    width: 120px;
    height: 470px;
    perspective: 900px;
    perspective-origin: 50% 30%;
  }
  .iswa-minaret-tilt,
  .iswa-minaret-spin,
  .iswa-minaret-box {
    position: absolute;
    transform-style: preserve-3d;
  }
  .iswa-minaret-tilt {
    inset: 0;
    transform: rotateX(-8deg);
  }
  .iswa-minaret-spin {
    inset: 0;
    animation: iswa-minaret-turn var(--spin) linear infinite;
  }
  @keyframes iswa-minaret-turn {
    from {
      transform: rotateY(-25deg);
    }
    to {
      transform: rotateY(335deg);
    }
  }
  .iswa-minaret-box {
    left: 50%;
    bottom: var(--y);
    width: var(--w);
    height: var(--h);
    margin-left: calc(var(--w) / -2);
  }
  .iswa-minaret-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background-size: 100% 100%;
  }
  .iswa-minaret-side {
    transform: rotateY(var(--a)) translateZ(calc(var(--w) / 2));
  }
  /* The underside slopes: centred between the block's half-width (42) and
     the shaft's (30), tipped so its top edge stands out further. */
  .iswa-minaret-sloped {
    top: calc((var(--h) - var(--len)) / 2);
    height: var(--len);
    transform: rotateY(var(--a)) translateZ(36px) rotateX(calc(var(--tilt) * -1));
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%);
  }
  .iswa-minaret-top {
    height: var(--w);
    top: calc((var(--h) - var(--w)) / 2);
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  }
  .iswa-minaret-oct {
    background-image: var(--dark);
    width: var(--w);
    transform: rotateY(var(--a)) translateZ(calc(var(--r) * 0.98));
  }

  /* Shadow as ink hatching, on the same clock as the iswa-minaret-turn: a face is clean
     facing the light (left) and hatched as it turns away. */
  .iswa-minaret-side::after,
  .iswa-minaret-oct::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #2a2622 0 0.8px, transparent 0.8px 5px);
    animation: iswa-minaret-hatch var(--spin) linear infinite;
    animation-delay: calc(var(--spin) * (var(--f) + 0.07) * -1);
  }
  .iswa-minaret-sloped::after {
    background: repeating-linear-gradient(45deg, #2a2622 0 1px, transparent 1px 4px);
  }
  @keyframes iswa-minaret-hatch {
    0% {
      opacity: 0.05;
    }
    20% {
      opacity: 0.3;
    }
    45% {
      opacity: 0.6;
    }
    70% {
      opacity: 0;
    }
    100% {
      opacity: 0.05;
    }
  }

  /* A sphere looks the same from every side, so it faces the camera. */
  .iswa-minaret-dome {
    position: absolute;
    left: 50%;
    bottom: 415px;
    width: 52px;
    height: 30px;
    margin-left: -26px;
  }
  .iswa-minaret-finial {
    position: absolute;
    left: 50%;
    bottom: 443px;
    width: 2.5px;
    height: 12px;
    margin-left: -1.25px;
    background: #2a2622;
  }
  .iswa-minaret-crescent {
    position: absolute;
    display: block;
    left: 50%;
    bottom: 452px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    fill: #b58a4c;
    overflow: visible;
  }
  /* Lit: the lantern's arches iswa-minaret-turn gold and a soft light spills round it. */
  .lit .iswa-minaret-oct {
    background-image: var(--lit);
  }
  .lit .iswa-minaret-oct::after {
    opacity: 0 !important;
  }
  .iswa-minaret-glow {
    position: absolute;
    left: 50%;
    bottom: 360px;
    width: 160px;
    height: 120px;
    margin-left: -80px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(243 198 106 / 0.55), rgb(243 198 106 / 0));
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity 0.6s ease,
      transform 0.9s var(--ease);
    pointer-events: none;
  }
  .lit .iswa-minaret-glow {
    opacity: 1;
    transform: none;
  }
  .iswa-minaret-ground {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 160px;
    margin-left: -80px;
    overflow: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .iswa-minaret-m3d-draw,
    .iswa-minaret-spin,
    .iswa-minaret-side::after,
    .iswa-minaret-oct::after {
      animation: none;
    }
    .iswa-minaret-spin {
      transform: rotateY(-30deg);
    }
  }