/*
================================================

Space Vanta Theme 1.0

Featured Function:
Vision

File:
public/header/featured-functions/vision/trigger.css

Version:
VISION-GEOMETRY-003

Purpose:
Prismatic Titanium Aperture

Responsibilities:
- Vision Aperture geometry
- Vision Aperture material
- Vision hover interaction
- Vision Header trigger presentation

Does NOT control:
- Find
- Featured Functions global layout
- Header layer structure
- Currency
- Language
- Navigation
- Search
- Account
- Cart
- Vision Panel
- Vision Transition

================================================
*/


/* =================================================
   APERTURE BASE
   ================================================= */

.sv-vision-aperture {

  position:
    relative;

  width:
    30px;

  height:
    22px;

  display:
    block;

  transform:
    rotate(-2deg);

  transform-style:
    preserve-3d;

}


/* =================================================
   HEADER APERTURE SCALE
   ================================================= */

.sv-featured-trigger--vision .sv-vision-aperture {

  transform:
    rotate(-2deg) scale(1.2);

}


/* =================================================
   FRAGMENT BASE
   ================================================= */

.sv-vision-aperture__fragment {

  position:
    absolute;

  display:
    block;

  height:
    2px;

  transform-origin:
    center center;

  background:
    linear-gradient(90deg,
      rgba(150, 157, 166, .82),
      rgba(245, 247, 248, .98),
      rgba(177, 213, 222, .92),
      rgba(205, 190, 221, .82),
      rgba(150, 157, 166, .78));

  box-shadow:
    0 0 5px rgba(129, 177, 194, .16),
    0 0 9px rgba(184, 161, 207, .08);

  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    opacity 360ms ease,
    filter 360ms ease;

}


/* =================================================
   UPPER LEFT
   ================================================= */

.sv-vision-aperture__fragment--a {

  width:
    11px;

  left:
    1px;

  top:
    5px;

  transform:
    rotate(24deg);

}


/* =================================================
   UPPER RIGHT
   ================================================= */

.sv-vision-aperture__fragment--b {

  width:
    11px;

  right:
    1px;

  top:
    5px;

  transform:
    rotate(-24deg);

}


/* =================================================
   LOWER LEFT
   ================================================= */

.sv-vision-aperture__fragment--c {

  width:
    11px;

  left:
    1px;

  bottom:
    5px;

  transform:
    rotate(-24deg);

}


/* =================================================
   LOWER RIGHT
   ================================================= */

.sv-vision-aperture__fragment--d {

  width:
    11px;

  right:
    1px;

  bottom:
    5px;

  transform:
    rotate(24deg);

}


/* =================================================
   INNER LEFT
   ================================================= */

.sv-vision-aperture__fragment--e {

  width:
    8px;

  left:
    7px;

  top:
    10px;

  transform:
    rotate(-90deg);

  opacity:
    .68;

  background:
    linear-gradient(180deg,
      rgba(191, 226, 233, .72),
      rgba(242, 239, 247, .94),
      rgba(191, 174, 215, .72));

}


/* =================================================
   INNER RIGHT
   ================================================= */

.sv-vision-aperture__fragment--f {

  width:
    8px;

  right:
    7px;

  top:
    10px;

  transform:
    rotate(90deg);

  opacity:
    .68;

  background:
    linear-gradient(180deg,
      rgba(191, 226, 233, .72),
      rgba(242, 239, 247, .94),
      rgba(191, 174, 215, .72));

}


/* =================================================
   CORE
   ================================================= */

.sv-vision-aperture__core {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  background:
    rgba(226, 234, 238, .96);

  box-shadow:
    0 0 5px rgba(112, 185, 202, .30),
    0 0 10px rgba(176, 151, 205, .16);

  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 520ms ease,
    opacity 360ms ease;

}


/* =================================================
   VISION HEADER TRIGGER LAYOUT
   ================================================= */

.sv-featured-trigger--vision {

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    0;

  padding-top:
    2px;

  padding-bottom:
    2px;

}


/* =================================================
   VISION HEADER ICON FRAME
   ================================================= */

.sv-featured-trigger--vision .sv-featured-trigger__icon {

  width:
    36px;

  height:
    26px;

  flex:
    0 0 26px;

}


/* =================================================
   VISION HORIZONTAL POSITION
   ================================================= */

.sv-featured-function--vision {

  margin-left:
    16px;

}


/* =================================================
   DESKTOP HOVER
   ================================================= */

@media (min-width: 768px) {

  .sv-featured-trigger--vision:hover .sv-vision-aperture {

    transform:
      rotate(0deg) scale(1.26);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--a {

    transform:
      translate3d(3px, 2px, 0) rotate(18deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--b {

    transform:
      translate3d(-3px, 2px, 0) rotate(-18deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--c {

    transform:
      translate3d(3px, -2px, 0) rotate(-18deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--d {

    transform:
      translate3d(-3px, -2px, 0) rotate(18deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--e {

    transform:
      translate3d(1px, 0, 0) rotate(-90deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__fragment--f {

    transform:
      translate3d(-1px, 0, 0) rotate(90deg);

  }


  .sv-featured-trigger--vision:hover .sv-vision-aperture__core {

    transform:
      translate(-50%, -50%) scale(1.25);

    box-shadow:
      0 0 8px rgba(113, 193, 211, .40),
      0 0 15px rgba(190, 161, 216, .22);

  }

}


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

@media (max-width: 767px) {

  .sv-featured-trigger--vision {

    flex-direction:
      column;

    gap:
      3px;

    min-height:
      0;

    padding-top:
      2px;

    padding-bottom:
      2px;

  }


  .sv-featured-trigger--vision .sv-featured-trigger__icon {

    width:
      34px;

    height:
      25px;

    flex:
      0 0 25px;

  }


  .sv-featured-function--vision {

    margin-left:
      10px;

  }

}


/* =================================================
   REDUCED MOTION
   ================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-vision-aperture,
  .sv-vision-aperture__fragment,
  .sv-vision-aperture__core {

    transition:
      none;

  }

}