/* ===== InfoPearl Tech: effects layer v2 (loader, transitions, gradient text, glow edges, marquee, magnetic buttons) ===== */

/* ---------- 1. Loading screen ---------- */
#ip-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 70% 20%,#06405f 0%,#023a56 45%,#021f2e 100%);
  transition:opacity .55s ease,visibility .55s ease;animation:ipLoaderFailsafe .01s 4s forwards}
.ip-seen #ip-loader{display:none}
#ip-loader.done{opacity:0;visibility:hidden}
@keyframes ipLoaderFailsafe{to{opacity:0;visibility:hidden}}
.ipl-box{display:grid;justify-items:center;gap:18px;text-align:center}
.ipl-logo{position:relative;width:118px;height:118px;display:grid;place-items:center}
.ipl-logo img{width:78px;height:78px;object-fit:contain;border-radius:50%;background:#fff;padding:8px;
  box-shadow:0 0 0 6px rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.35);animation:iplPop .7s cubic-bezier(.2,1.4,.4,1) both}
.ipl-logo::before,.ipl-logo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;
  border-top-color:#f0a234;border-right-color:#f0a234;animation:iplSpin 1.1s linear infinite}
.ipl-logo::after{inset:-12px;border-top-color:#a4b9fb;border-right-color:transparent;border-left-color:#a4b9fb;animation-duration:1.8s;animation-direction:reverse;opacity:.7}
.ipl-name{font:800 1.6rem/1 var(--display);color:#fff;letter-spacing:-.02em;overflow:hidden}
.ipl-name span{display:inline-block;animation:iplUp .6s .15s cubic-bezier(.2,.9,.3,1) both}
.ipl-name b{color:#f0a234}
.ipl-tag{font:500 .72rem/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#a4b9fb;animation:iplFade .6s .35s both}
.ipl-bar{width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ipl-bar i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,#f0a234,#d77a57);animation:iplBar 1s ease-in-out infinite}
@keyframes iplSpin{to{transform:rotate(360deg)}}
@keyframes iplPop{from{transform:scale(.5);opacity:0}}
@keyframes iplUp{from{transform:translateY(110%)}}
@keyframes iplFade{from{opacity:0;transform:translateY(6px)}}
@keyframes iplBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- 2. Page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ipOut .22s ease both}
::view-transition-new(root){animation:ipIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes ipOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes ipIn{from{opacity:0;transform:translateY(12px)}}
main#main-content{animation:ipIn .5s cubic-bezier(.2,.8,.2,1) both}
html.ip-leaving main#main-content{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}

/* ---------- 3. Animated gradient headings ---------- */
.head h2,.cta h2{
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 35%,var(--rust) 50%,var(--amber) 58%,var(--ink) 72%,var(--ink) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.head.visible h2,.head h2.ip-shine{animation:ipShine 2.6s .2s cubic-bezier(.4,0,.2,1) both}
.cta h2{background-image:linear-gradient(100deg,#fff 0%,#fff 35%,#f0a234 50%,#ffd38a 58%,#fff 72%,#fff 100%)}
.cta.ip-in h2{animation:ipShine 2.6s .2s cubic-bezier(.4,0,.2,1) both}
@keyframes ipShine{from{background-position:100% 0}to{background-position:0 0}}
.hero .h1 em{background:linear-gradient(90deg,#df8c16,#ffd38a,#f0a234,#d77a57,#df8c16);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ipFlow 6s linear infinite}
@keyframes ipFlow{to{background-position:300% 0}}


/* ---------- 4. Glowing animated card edges ---------- */
@property --ip-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.pillar,.prod,.plan,.ind,.role,.wk,.pb,.mv>div{position:relative}
.ip-edge{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:2;opacity:0;
  background:conic-gradient(from var(--ip-ang),transparent 0 55%,#f0a234 70%,#d77a57 80%,#a4b9fb 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .35s ease;animation:ipSpinAng 3.2s linear infinite;animation-play-state:paused}
:is(.pillar,.prod,.plan,.ind,.role,.wk,.pb,.mv>div):hover>.ip-edge{opacity:1;animation-play-state:running}
:is(.pillar,.prod,.plan,.ind,.role,.wk,.pb,.mv>div):hover{box-shadow:0 22px 50px -22px rgba(223,140,22,.45),0 10px 30px -18px rgba(2,58,86,.35)}
.plan.hl>.ip-edge{opacity:.85;animation-play-state:running}
@keyframes ipSpinAng{to{--ip-ang:360deg}}

/* ---------- 5. Marquee ticker ---------- */
.ip-marquee{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);border-block:1px solid rgba(255,255,255,.08);padding:16px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ip-track{display:flex;width:max-content;animation:ipMarq 38s linear infinite}
.ip-marquee:hover .ip-track{animation-play-state:paused}
.ip-track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font:700 clamp(1rem,1.6vw,1.25rem)/1 var(--display);white-space:nowrap;letter-spacing:-.01em}
.ip-track span::after{content:"";width:9px;height:9px;border-radius:50%;background:#f0a234;box-shadow:0 0 0 4px rgba(240,162,52,.18)}
.ip-track span:nth-child(3n+2){color:#f0a234}
.ip-track span:nth-child(3n+2)::after{background:#a4b9fb;box-shadow:0 0 0 4px rgba(164,185,251,.18)}
@keyframes ipMarq{to{transform:translateX(-50%)}}

/* ---------- 6. Magnetic buttons + click ripple ---------- */
.btn{will-change:transform}
.btn.ip-mag{transition:transform .18s ease-out,box-shadow .25s ease,background .25s ease}
.btn-amber:hover{box-shadow:0 12px 30px -10px rgba(223,140,22,.75)}
.ip-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);pointer-events:none;animation:ipRip .6s ease-out forwards}
@keyframes ipRip{to{transform:scale(3.2);opacity:0}}

/* ---------- 7. Cursor glow (desktop only) ---------- */
.ip-cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(223,140,22,.13),rgba(164,185,251,.08) 40%,transparent 70%);
  transition:opacity .4s ease;opacity:0;mix-blend-mode:multiply}
.ip-cursor.on{opacity:1}

/* ---------- 8. Section divider shimmer + image zoom ---------- */
section.alt{position:relative}
section.alt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,#df8c16,#b85e3d,#a4b9fb,transparent);background-size:200% 100%;animation:ipFlow 8s linear infinite;opacity:.55}
.photo-frame img,.commerce-image,.responsive-image,.contact-image{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.photo-frame:hover img,.image-collage:hover .commerce-image,.responsive-strip:hover .responsive-image{transform:scale(1.04)}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #ip-loader{display:none}
  main#main-content,.ip-track,.ip-edge,.hero .h1 em,section.alt::before{animation:none!important}
  .head h2,.cta h2{animation:none!important;background-position:0 0}
  .ip-cursor{display:none}
  @view-transition{navigation:none}
}
@media (hover:none){.ip-cursor{display:none}}

/* ---------- Fix: amber button text contrast (menu link colour was overriding it) ---------- */
.btn.btn-amber,.menu a.btn.btn-amber,.menu a.btn.btn-amber:hover,.drawer a.btn-amber{
  color:#0a2230!important;font-weight:700;letter-spacing:.005em;
  background:linear-gradient(135deg,#f6b44a 0%,#ef9f2c 50%,#e08a12 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.btn-amber:hover{color:#021a26!important;background:linear-gradient(135deg,#f8bd5a 0%,#f2a637 50%,#e3901a 100%)}

/* Marquee placed at the very top of the page, above the header */
.ip-marquee.ip-top{padding:9px 0;border-top:0;background:linear-gradient(90deg,#021f2e,#023a56 50%,#021f2e)}
.ip-marquee.ip-top .ip-track span{font-size:clamp(.82rem,1.1vw,.95rem);gap:18px;padding-right:18px}
.ip-marquee.ip-top .ip-track span::after{width:7px;height:7px}