/* =========================================================
   SEA LICENSING — SEAFARERS PORTAL
   PREMIUM DESKTOP EFFECTS V1
   ========================================================= */

@media (min-width:1051px){

  /* ---------------------------------------------------------
     MAIN PORTAL AREA
     --------------------------------------------------------- */

  .sfw-portal-grid{
    position:relative;
    isolation:isolate;
  }

  /* animated ambient ocean lighting */
  .sfw-portal-grid::before{
    content:"";
    position:absolute;
    z-index:-1;

    width:680px;
    height:680px;

    right:6%;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(36,178,225,.18) 0%,
        rgba(30,137,183,.10) 28%,
        rgba(17,89,126,.05) 52%,
        transparent 72%
      );

    filter:blur(14px);

    animation:
      sfwPortalAmbient 8s
      ease-in-out infinite alternate;

    pointer-events:none;
  }

  .sfw-portal-grid::after{
    content:"";
    position:absolute;
    z-index:-1;

    width:420px;
    height:420px;

    left:-6%;
    bottom:-30%;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(38,168,210,.10),
        transparent 68%
      );

    filter:blur(18px);

    animation:
      sfwPortalAmbient2 10s
      ease-in-out infinite alternate;

    pointer-events:none;
  }


  /* ---------------------------------------------------------
     SCROLL-IN REVEAL
     --------------------------------------------------------- */

  .sfw-portal-grid > :first-child{
    opacity:0;
    transform:translate3d(-32px,18px,0);

    transition:
      opacity .85s ease,
      transform .95s
      cubic-bezier(.16,1,.3,1);
  }

  .sfw-portal-grid > :last-child{
    opacity:0;
    transform:
      translate3d(38px,22px,0)
      scale(.975);

    transition:
      opacity .95s ease .10s,
      transform 1.05s
      cubic-bezier(.16,1,.3,1) .10s;
  }

  .sfw-portal-grid.sfw-portal-inview
  > :first-child{
    opacity:1;
    transform:none;
  }

  .sfw-portal-grid.sfw-portal-inview
  > :last-child{
    opacity:1;
    transform:none;
  }


  /* ---------------------------------------------------------
     PORTAL SCREENSHOT — DEPTH / FLOAT
     --------------------------------------------------------- */

  .sfw-portal-grid.sfw-portal-inview
  > :last-child{
    position:relative;

    transform:
      perspective(1200px)
      rotateX(var(--sfw-rx,0deg))
      rotateY(var(--sfw-ry,0deg))
      translateY(var(--sfw-float,0px));

    transform-style:preserve-3d;

    transition:
      transform .22s ease-out,
      filter .35s ease;

    filter:
      drop-shadow(
        0 26px 34px
        rgba(0,16,30,.27)
      );

    animation:
      sfwPortalFloat
      6.5s ease-in-out
      1.1s infinite;
  }

  .sfw-portal-grid
  > :last-child:hover{
    filter:
      drop-shadow(
        0 32px 46px
        rgba(0,12,25,.38)
      );
  }


  /* slow moving highlight over screenshot */
  .sfw-portal-grid
  > :last-child::after{
    content:"";

    position:absolute;
    inset:8px;

    z-index:4;

    border-radius:inherit;

    background:
      linear-gradient(
        112deg,
        transparent 18%,
        rgba(255,255,255,0) 35%,
        rgba(150,225,247,.16) 48%,
        rgba(255,255,255,.10) 51%,
        rgba(150,225,247,0) 62%,
        transparent 80%
      );

    transform:translateX(-150%);

    animation:
      sfwPortalSweep
      7.2s ease-in-out
      2s infinite;

    pointer-events:none;
  }


  /* subtle border pulse */
  .sfw-portal-grid
  > :last-child::before{
    content:"";

    position:absolute;
    inset:-1px;

    border-radius:inherit;

    border:
      1px solid
      rgba(103,208,240,.20);

    box-shadow:
      0 0 0 1px
      rgba(255,255,255,.025) inset,
      0 0 34px
      rgba(47,174,215,.07);

    animation:
      sfwPortalBorderGlow
      4.8s ease-in-out infinite;

    pointer-events:none;
  }


  /* ---------------------------------------------------------
     FEATURE TILES
     --------------------------------------------------------- */

  .sfw-portal-feature{
    position:relative;
    overflow:hidden;

    transition:
      transform .28s
      cubic-bezier(.16,1,.3,1),
      border-color .28s ease,
      background .28s ease,
      box-shadow .28s ease;
  }

  .sfw-portal-feature::before{
    content:"";

    position:absolute;

    width:80px;
    height:80px;

    right:-34px;
    top:-42px;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(93,207,241,.16),
        transparent 68%
      );

    opacity:0;

    transform:scale(.65);

    transition:
      opacity .3s ease,
      transform .4s ease;

    pointer-events:none;
  }

  .sfw-portal-feature:hover{
    transform:translateY(-3px);

    border-color:
      rgba(105,209,240,.30) !important;

    background:
      rgba(63,135,171,.18) !important;

    box-shadow:
      0 12px 26px
      rgba(0,17,29,.13);
  }

  .sfw-portal-feature:hover::before{
    opacity:1;
    transform:scale(1);
  }


  /* sequential entrance */
  .sfw-portal-inview
  .sfw-portal-feature{
    animation:
      sfwPortalChipIn
      .65s
      cubic-bezier(.16,1,.3,1)
      both;
  }

  .sfw-portal-inview
  .sfw-portal-feature:nth-child(1){
    animation-delay:.24s;
  }

  .sfw-portal-inview
  .sfw-portal-feature:nth-child(2){
    animation-delay:.33s;
  }

  .sfw-portal-inview
  .sfw-portal-feature:nth-child(3){
    animation-delay:.42s;
  }

  .sfw-portal-inview
  .sfw-portal-feature:nth-child(4){
    animation-delay:.51s;
  }


  /* ---------------------------------------------------------
     CTA
     --------------------------------------------------------- */

  .sfw-portal-grid
  > :first-child
  .btn{
    position:relative;
    overflow:hidden;

    transition:
      transform .25s ease,
      box-shadow .25s ease;
  }

  .sfw-portal-grid
  > :first-child
  .btn::after{
    content:"";

    position:absolute;
    top:-70%;
    bottom:-70%;

    width:45px;

    left:-80px;

    transform:rotate(18deg);

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.38),
        transparent
      );

    animation:
      sfwPortalButtonSweep
      5.5s ease-in-out
      2.8s infinite;

    pointer-events:none;
  }

  .sfw-portal-grid
  > :first-child
  .btn:hover{
    transform:translateY(-2px);

    box-shadow:
      0 12px 28px
      rgba(15,157,207,.22);
  }


  /* ---------------------------------------------------------
     ANIMATIONS
     --------------------------------------------------------- */

  @keyframes sfwPortalAmbient{
    from{
      transform:
        translateY(-50%)
        translateX(-20px)
        scale(.94);

      opacity:.60;
    }

    to{
      transform:
        translateY(-50%)
        translateX(34px)
        scale(1.08);

      opacity:1;
    }
  }

  @keyframes sfwPortalAmbient2{
    from{
      transform:
        translate(-20px,8px)
        scale(.92);
    }

    to{
      transform:
        translate(35px,-22px)
        scale(1.10);
    }
  }

  @keyframes sfwPortalFloat{
    0%,100%{
      --sfw-float:0px;
    }

    50%{
      --sfw-float:-8px;
    }
  }

  @keyframes sfwPortalSweep{
    0%,60%{
      transform:translateX(-150%);
      opacity:0;
    }

    67%{
      opacity:1;
    }

    82%{
      transform:translateX(150%);
      opacity:.9;
    }

    100%{
      transform:translateX(150%);
      opacity:0;
    }
  }

  @keyframes sfwPortalBorderGlow{
    0%,100%{
      opacity:.55;
    }

    50%{
      opacity:1;
    }
  }

  @keyframes sfwPortalChipIn{
    from{
      opacity:0;
      transform:translateY(12px);
    }

    to{
      opacity:1;
      transform:none;
    }
  }

  @keyframes sfwPortalButtonSweep{
    0%,68%{
      left:-80px;
    }

    84%,100%{
      left:130%;
    }
  }

}


/* accessibility */
@media (prefers-reduced-motion:reduce){

  .sfw-portal-grid,
  .sfw-portal-grid *,
  .sfw-portal-grid::before,
  .sfw-portal-grid::after{
    animation:none !important;
    transition:none !important;
  }

  .sfw-portal-grid > :first-child,
  .sfw-portal-grid > :last-child{
    opacity:1 !important;
    transform:none !important;
  }

}

/* =========================================================
   SEA LICENSING — SEAFARERS PORTAL
   MARITIME BACKGROUND TEXTURE ADD-ON
   Desktop only
   ========================================================= */

@media (min-width:1051px){

  /* target the full section that contains the portal grid */
  body.seafarers-page section:has(.sfw-portal-grid){
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
      linear-gradient(
        115deg,
        #173f5c 0%,
        #1d4f70 48%,
        #255f84 100%
      ) !important;
  }

  /* keep content above texture */
  body.seafarers-page section:has(.sfw-portal-grid) > *{
    position:relative;
    z-index:1;
  }

  /* main chart / texture layer */
  body.seafarers-page section:has(.sfw-portal-grid)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
      radial-gradient(
        circle at 78% 30%,
        rgba(122,217,240,.10) 0%,
        rgba(122,217,240,.04) 18%,
        transparent 42%
      ),
      radial-gradient(
        circle at 22% 72%,
        rgba(77,170,206,.08) 0%,
        transparent 34%
      ),
      repeating-linear-gradient(
        0deg,
        rgba(207,236,245,.045) 0,
        rgba(207,236,245,.045) 1px,
        transparent 1px,
        transparent 62px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(207,236,245,.035) 0,
        rgba(207,236,245,.035) 1px,
        transparent 1px,
        transparent 62px
      ),
      repeating-linear-gradient(
        -14deg,
        rgba(181,228,240,.032) 0,
        rgba(181,228,240,.032) 2px,
        transparent 2px,
        transparent 140px
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.02) 0%,
        transparent 24%,
        transparent 58%,
        rgba(164,220,238,.05) 59%,
        transparent 60%,
        transparent 100%
      );

    opacity:.58;
  }

  /* soft compass / sea-glow accent */
  body.seafarers-page section:has(.sfw-portal-grid)::after{
    content:"";
    position:absolute;
    width:760px;
    height:760px;
    right:-140px;
    bottom:-280px;
    z-index:0;
    border-radius:50%;
    pointer-events:none;

    background:
      radial-gradient(
        circle,
        rgba(97,202,231,.12) 0%,
        rgba(97,202,231,.06) 22%,
        rgba(97,202,231,.025) 40%,
        transparent 62%
      );

    filter:blur(10px);

    animation:
      sfwSeaTextureDrift 16s
      ease-in-out infinite alternate;
  }

  /* subtle inner rings like a nautical chart */
  body.seafarers-page section:has(.sfw-portal-grid) .sfw-portal-grid::before{
    box-shadow:
      0 0 0 1px rgba(157,220,239,.025) inset;
  }

  body.seafarers-page section:has(.sfw-portal-grid) .sfw-portal-grid::after{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.02) inset;
  }

  @keyframes sfwSeaTextureDrift{
    from{
      transform:
        translate3d(-20px,18px,0)
        scale(.96);
      opacity:.65;
    }
    to{
      transform:
        translate3d(26px,-24px,0)
        scale(1.06);
      opacity:1;
    }
  }
}