/* Page transitions */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: blog-out .28s ease both;
}
::view-transition-new(root) {
  animation: blog-in .42s ease both;
}
@keyframes blog-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes blog-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Insights hero */
.ins-hero {
  background: var(--night-navy) url("/assets/ridge-night-960.webp") center bottom / cover no-repeat;
}
.ins-hero {
  overflow: hidden;
}
.ins-hero::before {
  z-index: 0;
  background: rgba(6, 12, 24, .8);
}
.ins-hero > .ridge-line {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(242, 198, 109, .55));
}
.ridge-line svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ridge-node {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #F2C66D;
  background: radial-gradient(circle, #F2C66D 0 3px, rgba(6, 12, 24, .9) 4px);
}
.ridge-node.n1 {
  left: 26.69%;
  top: 77.56%;
}
.ridge-node.n2 {
  left: 62.6%;
  top: 27.47%;
}
.ridge-node.n3 {
  left: 98.5%;
  top: 6.0%;
}
.ins-hero .ins-row-text, .ins-hero .ins-list-head, .ins-feature h1, .ins-feature > p, .ins-meta {
  text-shadow: 0 1px 8px rgba(6, 12, 24, .9), 0 0 2px rgba(6, 12, 24, .8);
}

.ridge-draw {
  clip-path: inset(0 100% 0 0);
  animation: ridge-draw 2.6s ease-out .2s forwards;
}
.ridge-pulse {
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 0 6px #F2C66D);
  animation: ridge-pulse 5s linear 2.8s infinite;
}
.ridge-node {
  opacity: 0;
  animation: ridge-node .5s ease forwards;
}
.ridge-node.n1 {
  animation-delay: .9s;
}
.ridge-node.n2 {
  animation-delay: 1.7s;
}
.ridge-node.n3 {
  animation-delay: 2.6s;
}
@keyframes ridge-draw {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes ridge-pulse {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  6% {
    clip-path: inset(0 94% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 94%);
  }
}
@keyframes ridge-node {
  to {
    opacity: 1;
  }
}

/* Phone and tablet (up to 979 px) */
@media (max-width: 979px) {
  .ins-hero > .ridge-line {
    top: auto;
    height: min(100%, 75vw);
  }
}

/* Wide screens (from 980 px) */
@media (min-width: 980px) {
  .ins-hero {
    background-image: url("/assets/ridge-night-1920.webp");
  }
  .ridge-node.n2 {
    display: none;
  }
}

/* Hero light */
.ins-hero, .blog-page .hero {
  isolation: isolate;
}
.ins-hero::after, .blog-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(217, 176, 98, .16) 48%, rgba(243, 221, 166, .22) 50%, rgba(217, 176, 98, .16) 52%, transparent 70%);
  background-size: 260% 100%;
  animation: blog-sweep 2.4s ease-out .3s both;
}
.ins-hero > *, .blog-page .hero > * {
  position: relative;
  z-index: 1;
}
@keyframes blog-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -60% 0;
  }
}

/* Post author */
.post-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--light-gray, #D9DEE5);
}
.post-author img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 22px rgba(6, 12, 24, .25);
  object-fit: cover;
}
.post-author-line {
  font-size: 14px;
  color: var(--gray);
}
.post-author-line a {
  color: var(--bronze-text);
  font-weight: 600;
  text-decoration: none;
}
.post-author-line a:hover {
  text-decoration: underline;
}

/* Post list light */
.ins-row {
  position: relative;
  overflow: hidden;
}
.ins-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(217, 176, 98, .28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.ins-row:hover::after, .ins-row:focus-visible::after {
  transition: transform .9s ease;
  transform: translateX(120%);
}
.ins-row .thumb {
  transition: box-shadow .35s ease, transform .35s ease;
}
.ins-row:hover .thumb, .ins-row:focus-visible .thumb {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(217, 176, 98, .55), 0 0 18px rgba(217, 176, 98, .45);
}

/* Reading light */
.read-light {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bronze), var(--gold), #F3DDA6);
  box-shadow: 0 0 12px rgba(217, 176, 98, .8), 0 0 4px rgba(243, 221, 166, .9);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Scroll light */
.post-body .lit {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.post-body .lit.on {
  opacity: 1;
  transform: none;
}
.post-body .post-h2 {
  position: relative;
}
.post-body .post-h2::before {
  content: "";
  position: absolute;
  left: -18px;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #F3DDA6, var(--gold), var(--bronze));
  box-shadow: 0 0 10px rgba(217, 176, 98, .7);
  opacity: 0;
  transform: scaleY(.2);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.post-body .post-h2.on::before {
  opacity: 1;
  transform: none;
}

/* Phone and tablet (up to 759 px) */
@media (max-width: 759px) {
  .post-body .post-h2::before {
    left: -10px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ridge-draw {
    animation: none;
    clip-path: none;
  }
  .ridge-pulse {
    display: none;
  }
  .ridge-node {
    animation: none;
    opacity: 1;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
  }
  .ins-hero::after, .blog-page .hero::after {
    animation: none;
    opacity: 0;
  }
  .ins-row::after {
    display: none;
  }
  .post-body .lit, .post-body .post-h2::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}