/* ============================================================================
   OMEGA FEATURED GENERATOR SHOWCASE
   Five hexagonal prisms, each turning slowly on its own, each face a real
   generator you can open.

   Built out of CSS 3D transforms and nothing else: no framework, no WebGL, no
   canvas, no video. Six faces are placed around a hexagon with rotateY and
   translateZ, and the whole prism is turned by one keyframe animation. The
   browser does this on the compositor, so five of them cost almost nothing.

   Deep purple, refined gold, a low starlight glow, and depth that comes from
   real shadow rather than decoration.
   ========================================================================= */
/* A full-width section measured in viewport units is a hair wider than the page
   whenever a scrollbar is showing, which would leave the whole site scrolling
   sideways by a few pixels. Clipping the page's horizontal overflow removes
   that without creating a scroll container — sticky elements keep working. */
body{ overflow-x:hidden; overflow-x:clip; }

.omega-showcase{
 --sc-purple:#2A1250; --sc-purple-deep:#150826; --sc-gold:#C9962E;
 --sc-gold-bright:#E7C45A; --sc-ink:#F4EFF9; --sc-muted:#B6A8C6;
 /* Out of the page's centred column and across the whole window. The homepage
    keeps its text to a comfortable measure, but a showcase of five turning
    objects wants the room a desktop actually has. */
 width:100vw; max-width:100vw;
 margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
 position:relative; padding:96px clamp(20px, 3vw, 64px) 104px; overflow:hidden;
 background:
  radial-gradient(80% 55% at 50% -10%, rgba(201,150,46,.16), transparent 62%),
  radial-gradient(60% 45% at 12% 108%, rgba(123,63,191,.28), transparent 66%),
  linear-gradient(180deg, var(--sc-purple-deep), #1B0B33 52%, var(--sc-purple-deep));
}
/* starlight: two fixed dust layers, no images, no animation cost */
.omega-showcase:before{
 content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
 background-image:
  radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.75), transparent),
  radial-gradient(1.2px 1.2px at 78% 14%, rgba(231,196,90,.8), transparent),
  radial-gradient(1.1px 1.1px at 34% 76%, rgba(255,255,255,.5), transparent),
  radial-gradient(1.5px 1.5px at 62% 58%, rgba(255,255,255,.45), transparent),
  radial-gradient(1.2px 1.2px at 88% 82%, rgba(231,196,90,.6), transparent),
  radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,.4), transparent);
}
.omega-showcase .sc-inner{position:relative; width:min(94vw, 1900px); margin:0 auto; z-index:1}
.omega-showcase h2{
 margin:0; text-align:center; font-family:"Playfair Display",Georgia,serif;
 font-weight:700; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.4px;
 color:var(--sc-ink);
}
.omega-showcase h2 em{
 font-style:normal; display:block; color:var(--sc-gold-bright);
}
.omega-showcase .sc-sub{
 margin:12px auto 0; max-width:56ch; text-align:center; color:var(--sc-muted);
 font-size:15px; line-height:1.6;
}
.omega-showcase .sc-rule{
 width:78px; height:2px; margin:24px auto 64px; border-radius:2px;
 background:linear-gradient(90deg, transparent, var(--sc-gold), transparent);
}

/* ------------------------------------------------------------- the layout
   Five units. Wide screens take all five in a row; below that they fall into
   three and two rather than shrinking into something unreadable. */
.sc-stage{
 /* Three over two, and the lower pair centred beneath the gaps of the upper
    three. Six half-columns make that arrangement possible without a single
    magic number: each unit spans two of them, and the second row starts one
    half-column in. */
 display:grid; justify-items:center; align-items:start;
 grid-template-columns:repeat(6, minmax(0,1fr));
 column-gap:clamp(44px, 4.4vw, 130px); row-gap:clamp(72px, 6vw, 130px);
}
.sc-stage > .sc-unit:nth-child(1){ grid-column:1 / span 2; }
.sc-stage > .sc-unit:nth-child(2){ grid-column:3 / span 2; }
.sc-stage > .sc-unit:nth-child(3){ grid-column:5 / span 2; }
.sc-stage > .sc-unit:nth-child(4){ grid-column:2 / span 2; }
.sc-stage > .sc-unit:nth-child(5){ grid-column:4 / span 2; }

@media (max-width:1020px){
 .sc-stage{ grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:56px; row-gap:70px; }
 .sc-stage > .sc-unit:nth-child(1){ grid-column:1 / span 2; }
 .sc-stage > .sc-unit:nth-child(2){ grid-column:3 / span 2; }
 .sc-stage > .sc-unit:nth-child(3){ grid-column:1 / span 2; }
 .sc-stage > .sc-unit:nth-child(4){ grid-column:3 / span 2; }
 .sc-stage > .sc-unit:nth-child(5){ grid-column:2 / span 2; }
}

.sc-unit{
 /* wide enough that five in a row still read as five real objects */
 width:100%; max-width:clamp(300px, 26vw, 500px); display:flex; flex-direction:column; align-items:center;
}
.sc-label{
 /* the faces are pushed toward the viewer in 3D, so anything beneath a prism
    has to be lifted above them or it is painted over */
 position:relative; z-index:2;
 margin-top:30px; text-align:center; font-size:12px; letter-spacing:.14em;
 text-transform:uppercase; color:var(--sc-gold-bright); opacity:.92;
}

/* --------------------------------------------------------------- the prism */
.sc-viewport{
 /* align-self:stretch matters: inside a centred column the viewport holds only
    absolutely positioned faces, so without it the box collapses to nothing */
 width:100%; align-self:stretch; aspect-ratio:1/0.92;
 perspective:1100px; perspective-origin:50% 46%; position:relative;
}
.sc-prism{
 position:absolute; inset:0; transform-style:preserve-3d;
 animation:sc-turn var(--sc-duration,52s) linear infinite;
 animation-delay:var(--sc-delay,0s);
 will-change:transform;
}
/* the floor glow, so each unit sits in the scene instead of floating on it */
.sc-viewport:after{
 content:""; position:absolute; left:22%; right:22%; bottom:6%; height:14px;
 border-radius:50%; pointer-events:none;
 background:radial-gradient(50% 100% at 50% 50%, rgba(201,150,46,.34), transparent 70%);
 filter:blur(3px);
}
@keyframes sc-turn{
 from{ transform:rotateX(-8deg) rotateY(var(--sc-start,0deg)); }
 to  { transform:rotateX(-8deg) rotateY(calc(var(--sc-start,0deg) + 360deg)); }
}

.sc-face{
 /* A hexagonal prism is far wider than one of its faces — nearly twice, corner
    to corner. So the face is sized to a fraction of the box and centred in it,
    and the whole turning object stays inside its own space instead of reaching
    across into the next one. */
 position:absolute;
 width:var(--sc-fw, 58%); height:var(--sc-fh, 68%);
 left:calc(50% - var(--sc-fw, 58%) / 2);
 top:calc(50% - var(--sc-fh, 68%) / 2);
 display:block; text-decoration:none; color:inherit;
 border-radius:14px; overflow:hidden; backface-visibility:hidden;
 transform:rotateY(var(--sc-angle)) translateZ(var(--sc-depth,96px));
 background:linear-gradient(160deg, #24123A, #180A2C);
 border:1px solid rgba(231,196,90,.34);
 box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.sc-face img{
 width:100%; height:100%; object-fit:cover; display:block;
 filter:saturate(1.02) contrast(1.02);
}
.sc-face .sc-plate{
 position:absolute; left:0; right:0; bottom:0; padding:26px 10px 10px;
 font-size:11.5px; line-height:1.3; color:#fff; text-align:center;
 background:linear-gradient(180deg, transparent, rgba(10,4,20,.88));
}
.sc-face.sc-empty{
 display:flex; align-items:center; justify-content:center; text-align:center;
 padding:14px; color:var(--sc-muted); font-size:11.5px; letter-spacing:.08em;
 text-transform:uppercase;
 background:
  radial-gradient(70% 60% at 50% 30%, rgba(123,63,191,.34), transparent 70%),
  linear-gradient(160deg, #241338, #150826);
}
.sc-face:focus-visible{
 outline:2px solid var(--sc-gold-bright); outline-offset:3px;
}
.sc-face:hover{ border-color:var(--sc-gold-bright); }

/* hover, focus and touch all hold the prism still so a face can be read */
.sc-unit:hover .sc-prism,
.sc-unit:focus-within .sc-prism,
.sc-unit.sc-held .sc-prism{ animation-play-state:paused; }

/* ---------------------------------------------------------------- controls */
.sc-controls{
 position:relative; z-index:2;
 display:flex; gap:10px; align-items:center; justify-content:center; margin-top:14px;
}
.sc-controls button{
 min-width:44px; min-height:38px; border-radius:9px; cursor:pointer;
 background:rgba(255,255,255,.05); color:var(--sc-ink);
 border:1px solid rgba(231,196,90,.34); font-size:13px;
}
.sc-controls button:hover{ border-color:var(--sc-gold-bright); }
.sc-dots{ display:none; }

/* -------------------------------------------------------------- one at a time
   On a phone, one prism at a time, full and readable, with the others a swipe
   away. Never five thumbnails in a row. */
@media (max-width:720px){
 .omega-showcase{ padding:44px 14px 52px; }
 .sc-stage{
  grid-template-columns:1fr; gap:0;
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  /* no scroll-behavior here on purpose: with it set, even setting the
     position directly is animated, and a dropped animation leaves the dots
     doing nothing. The script asks for a smooth glide itself and checks it. */
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
 }
 .sc-stage::-webkit-scrollbar{ display:none; }
 .sc-unit{
  flex:0 0 100%; max-width:100%; scroll-snap-align:center; padding:0 6px;
 }
 .sc-viewport{ max-width:300px; margin:0 auto; }
 .sc-dots{
  display:flex; gap:8px; justify-content:center; margin-top:20px;
 }
 .sc-dots button{
  width:10px; height:10px; padding:0; min-width:0; min-height:0; border-radius:50%;
  border:1px solid rgba(231,196,90,.5); background:transparent; cursor:pointer;
 }
 .sc-dots button[aria-current="true"]{ background:var(--sc-gold-bright); }
 .sc-dots-hit{
  position:relative;
 }
}

/* nothing turns for anyone who has asked the system for less movement */
@media (prefers-reduced-motion:reduce){
 .sc-prism{ animation:none !important; transform:rotateX(-6deg) rotateY(var(--sc-start,0deg)); }
 .sc-face{ transition:none !important; }
}