/* ============================================================
   Site 2.0 - interaction layer (P5)
   Loads after chrome.css, copy.css so it can layer hover and
   component treatment onto other owners' markup without editing
   their files. Everything here is transform/opacity/background
   driven, gated behind (pointer:fine) with a :focus-visible twin
   for every gated rule, and quiet under prefers-reduced-motion
   (handled globally in base.css).

   Governing idea, carried over from the previous build: every
   hover is a hand reaching out, offering rather than merely
   highlighting.

   Contrast: brand amber is a fill only, never text (see base.css
   header). .btn (primary) fills solid amber and sets navy text,
   8.61:1. .btn-ghost sits on glass and sets --accent text, 5.12:1
   or better against its own composited background.
   ============================================================ */

/* ---------- buttons ---------- */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem;
  border:1px solid var(--glass-edge);
  border-radius:12px;
  cursor:pointer;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    var(--amber);
  color:var(--navy);
  font:600 var(--t-sm)/1 var(--sans);
  letter-spacing:.01em;
  box-shadow:var(--glass-cast), inset 0 1px 0 var(--glass-edge);
  transition:box-shadow .4s var(--ease);
}
/* signature: a sheen sweeps across on approach, like light catching glass */
.btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-140%);
  transition:transform .7s var(--ease);
}
@media (pointer:fine){
  .btn:hover{ box-shadow:0 4px 14px rgba(10,26,47,.14), 0 20px 44px rgba(10,26,47,.18), inset 0 1px 0 var(--glass-edge); }
  .btn:hover::after{ transform:translateX(140%); }
}
.btn:focus-visible{ box-shadow:0 4px 14px rgba(10,26,47,.14), 0 20px 44px rgba(10,26,47,.18), inset 0 1px 0 var(--glass-edge); }
.btn:focus-visible::after{ transform:translateX(140%); }

/* ghost: true glass, sits close to the paper, warms rather than sweeps */
.btn-ghost{
  background:var(--glass);
  border-color:var(--glass-line);
  color:var(--accent);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:var(--glass-cast);
}
.btn-ghost::after{ display:none; }
@media (pointer:fine){
  .btn-ghost:hover{
    background:color-mix(in srgb, var(--amber) 14%, var(--glass));
    border-color:var(--accent);
    color:var(--accent-hi);
    letter-spacing:.03em;
  }
}
.btn-ghost:focus-visible{
  background:color-mix(in srgb, var(--amber) 14%, var(--glass));
  border-color:var(--accent);
  color:var(--accent-hi);
}

/* ---------- masthead nav ---------- */

/* The nav label NEVER changes colour on hover or focus. --accent is safe on
   solid paper at 5.12:1, but this text sits on a translucent glass capsule
   floating over film, and the frame beneath drags it down to 2.47:1. The
   hover signal is the underline, which is a fill and so exempt from the text
   contrast rule. chrome.css already established this; this file was quietly
   overriding it. */
.mh-nav a{
  position:relative;
  padding-bottom:.3rem;
}
.mh-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
@media (pointer:fine){
  .mh-nav a:hover::after{ transform:scaleX(1); }
}
.mh-nav a:focus-visible::after{ transform:scaleX(1); }

/* ---------- social icon links ----------
   New platforms just work: add <li><a data-social="x" ...><span>X</span>
   </a></li> to #socials in index.html and interactions.js finds it by
   that same attribute, injects the matching glyph, and this stylesheet's
   attribute selectors already cover it. */

.socials{ display:flex; flex-wrap:wrap; gap:.7rem; list-style:none; padding:0; margin:1.2rem 0 0; }
.socials li{ display:contents; }
/* Named, not just drawn. These were 44px unlabelled circles and the client
   read the row as empty: an icon somebody has to hunt for is a puzzle, not a
   link. The platform name now sits beside the glyph, the target clears the
   48px touch minimum, and the row is obvious at a glance. */
.socials a{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.72rem 1.15rem .72rem .85rem;
  min-height:48px; border-radius:100px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-top-color:var(--glass-edge);
  color:var(--ink);
  font:500 var(--t-xs)/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:var(--glass-cast);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease),
             box-shadow .5s var(--ease);
}
.socials a span{ white-space:nowrap; }
.socials svg{ width:20px; height:20px; transition:transform .5s var(--ease); }

@media (pointer:fine){
  .socials a:hover{
    background:var(--paper);
    border-color:var(--accent);
    color:var(--accent-hi);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(10,26,47,.14);
  }
}
.socials a:focus-visible{
  background:var(--paper);
  border-color:var(--accent);
  color:var(--accent-hi);
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(10,26,47,.14);
}

/* each platform reaches out its own way */
@media (pointer:fine){
  .socials a[data-social="facebook"]:hover svg{ animation:si-wobble .5s var(--ease); }
  .socials a[data-social="linkedin"]:hover svg{ transform:translateY(-3px); }
  .socials a[data-social="instagram"]:hover svg{ animation:si-focus .5s var(--ease); }
  .socials a[data-social="tiktok"]:hover svg{ animation:si-bounce .5s var(--ease); }
  .socials a[data-social="youtube"]:hover svg{ transform:scale(1.16); }
  .socials a[data-social="x"]:hover svg{ transform:rotate(90deg); }
}
.socials a[data-social="facebook"]:focus-visible svg{ animation:si-wobble .5s var(--ease); }
.socials a[data-social="linkedin"]:focus-visible svg{ transform:translateY(-3px); }
.socials a[data-social="instagram"]:focus-visible svg{ animation:si-focus .5s var(--ease); }
.socials a[data-social="tiktok"]:focus-visible svg{ animation:si-bounce .5s var(--ease); }
.socials a[data-social="youtube"]:focus-visible svg{ transform:scale(1.16); }
.socials a[data-social="x"]:focus-visible svg{ transform:rotate(90deg); }

@keyframes si-wobble{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-12deg); } 75%{ transform:rotate(10deg); } }
@keyframes si-focus{ 0%{ transform:scale(1); } 50%{ transform:scale(.8); } 100%{ transform:scale(1); } }
@keyframes si-bounce{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } 70%{ transform:translateY(1px); } }

/* ---------- the IntelliCore signature ----------
   It used to be a navy chip carrying a white mark, because a white mark was
   the only one on disk. The client asked for something tasteful and not
   intrusive, and a badge on someone else's footer is intrusive by nature.
   The mark is now navy, so it needs no container at all: a small line of
   quiet type and a small mark, sitting on the paper. It holds back at .58
   and comes fully forward on hover, so it is unmistakably a link without
   ever competing with the client's own name above it. */

/* ---------- the IntelliCore credit ----------
   The glass orb is gone. A spinning object in a footer competes with the site
   it is crediting, which is the wrong way round.

   At rest this is one small mark and nothing else. On hover a hairline draws
   out from it and the wording arrives along that line, a beat later, so the
   reveal reads as drawn rather than switched on. Quiet until you look at it,
   which is what a credit should be. */
.ic{
  display:inline-flex; align-items:center; flex-direction:row-reverse;
  gap:0; text-decoration:none;
  opacity:.55;
  transition:opacity .55s var(--ease);
}

.ic-mark{
  /* Twice the size, at the client's request. */
  width:52px; height:auto; flex:none; display:block;
  transition:transform .55s var(--ease), filter .55s var(--ease);
}

/* The hairline. Grows from nothing, anchored at the mark end. */
.ic-rule{
  display:block; flex:none;
  width:0; height:1px;
  background:currentColor; color:var(--ink-faint);
  transform-origin:right center;
  transition:width .5s var(--ease);
}

/* The wording, folded to nothing and clipped so it appears to slide out from
   under the rule rather than simply fading. */
.ic-say{
  display:inline-block; overflow:hidden;
  max-width:0; opacity:0;
  font:500 var(--t-xs)/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
  transition:max-width .55s var(--ease), opacity .4s var(--ease);
}
.ic-say > span{
  display:inline-block; padding:0 .7rem;
  transform:translateX(10px);
  transition:transform .55s var(--ease);
}

/* Hover and keyboard get the same reveal, and the rule leads by 60ms so the
   line is already drawing when the words start to move. */
.ic:hover, .ic:focus-visible{ opacity:1; outline:none; }
.ic:hover .ic-rule, .ic:focus-visible .ic-rule{ width:34px; }
.ic:hover .ic-say, .ic:focus-visible .ic-say{
  max-width:18rem; opacity:1; transition-delay:.06s;
}
.ic:hover .ic-say > span, .ic:focus-visible .ic-say > span{
  transform:translateX(0); transition-delay:.06s;
}
.ic:hover .ic-mark, .ic:focus-visible .ic-mark{
  transform:translateY(-1px);
  filter:drop-shadow(0 3px 6px rgba(10,26,47,.18));
}
.ic:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }

/* Touch has no hover, so it simply reads as a complete credit. */
@media (pointer:coarse){
  .ic{ opacity:.7; }
  .ic-rule{ width:34px; }
  .ic-say{ max-width:18rem; opacity:1; }
  .ic-say > span{ transform:none; }
}
.ic img{ width:32px; display:block; }
@media (pointer:fine){
  .ic:hover{ opacity:1; }
}
.ic:focus-visible{ opacity:1; }