/* Immersive image integration for the Roman-themed custom templates. */

body[data-accent="#e06a5a"] { --scene-rgb: 42, 17, 17; }
body[data-accent="#f07f2e"] { --scene-rgb: 43, 21, 5; }
body[data-accent="#e8b64e"] { --scene-rgb: 36, 27, 9; }
body[data-accent="#8fce7f"] { --scene-rgb: 21, 35, 22; }

body[data-accent] {
  background-image:
    radial-gradient(circle at 72% 8%, rgba(240,217,174,.055), transparent 32rem),
    linear-gradient(180deg, rgba(var(--scene-rgb),.92), rgb(var(--scene-rgb)) 28rem);
}

body[data-accent] > header {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  border-bottom-color: rgba(240,217,174,.16);
  background: linear-gradient(180deg, rgba(var(--scene-rgb),.88), rgba(var(--scene-rgb),.42) 68%, transparent);
  backdrop-filter: blur(4px);
}

body[data-accent] main:not(.layout) > .hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 72vh, 780px);
  overflow: hidden;
  background: rgb(var(--scene-rgb));
}

body[data-accent] main:not(.layout) > .hero img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  max-height: none;
  object-fit: cover !important;
  object-position: center 42%;
  filter: saturate(.92) contrast(1.04) brightness(.96);
  transform: scale(1.015);
}

body[data-accent] main:not(.layout) > .hero .veil {
  z-index: 1;
  background:
    radial-gradient(circle at 76% 43%, transparent 0 20%, rgba(var(--scene-rgb),.06) 48%, rgba(var(--scene-rgb),.40) 100%),
    linear-gradient(90deg, rgba(var(--scene-rgb),.78) 0%, rgba(var(--scene-rgb),.30) 38%, transparent 72%),
    linear-gradient(180deg, rgba(var(--scene-rgb),.34) 0%, transparent 30%, transparent 54%, rgba(var(--scene-rgb),.72) 78%, rgb(var(--scene-rgb)) 100%);
}

body[data-accent] main:not(.layout) > .wrap {
  position: relative;
  z-index: 2;
  margin-top: -164px;
  padding-top: 30px;
}

body[data-accent] main:not(.layout) > .wrap h1,
body[data-accent] main:not(.layout) > .wrap .lead {
  max-width: 690px;
  text-shadow: 0 3px 30px rgba(0,0,0,.65);
}

body[data-accent] > footer {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.10));
}

/* Contact: let the garden continue beneath the content instead of ending at a seam. */
body[data-accent="#8fce7f"] main.layout {
  position: relative;
  isolation: isolate;
  align-items: start;
  min-height: 100vh;
  overflow: clip;
}

body[data-accent="#8fce7f"] main.layout .art {
  position: sticky;
  z-index: 0;
  top: 0;
  align-self: start;
  width: calc(100% + 30vw);
  height: 100vh;
  margin-right: -30vw;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.78) 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.78) 68%, transparent 100%);
}

body[data-accent="#8fce7f"] main.layout .art img {
  filter: saturate(.84) contrast(1.04) brightness(.88);
  object-position: center 28%;
}

body[data-accent="#8fce7f"] main.layout .art .veil {
  background:
    linear-gradient(180deg, rgba(21,35,22,.40), transparent 24%, transparent 74%, rgba(21,35,22,.72)),
    linear-gradient(90deg, transparent 36%, rgba(21,35,22,.08) 58%, rgba(21,35,22,.72) 88%, #152316 100%);
}

body[data-accent="#8fce7f"] main.layout .content {
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding-top: 116px;
  text-shadow: 0 2px 18px rgba(0,0,0,.46);
}

body[data-accent="#8fce7f"] main.layout .content::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -12vw 0 -14vw;
  background: linear-gradient(90deg, transparent 0%, rgba(21,35,22,.62) 24%, rgba(21,35,22,.93) 52%, #152316 78%);
  pointer-events: none;
}

/* Home: remove card-like edges so copy and portrait float inside the 3D scene. */
body:not([data-accent]) #topbar {
  background: linear-gradient(180deg, rgba(18,12,8,.76), rgba(18,12,8,.24) 72%, transparent);
  backdrop-filter: blur(2px);
}

body:not([data-accent]) .panel {
  border: 0;
  background: radial-gradient(ellipse at center, rgba(18,12,8,.80) 0%, rgba(18,12,8,.54) 44%, rgba(18,12,8,.16) 68%, transparent 78%);
  backdrop-filter: none;
  padding: 46px 54px;
}

body:not([data-accent]) .panel.p-left {
  background: radial-gradient(ellipse at left center, rgba(18,12,8,.86) 0%, rgba(18,12,8,.58) 48%, transparent 78%);
}

body:not([data-accent]) .panel.p-right {
  background: radial-gradient(ellipse at right center, rgba(18,12,8,.86) 0%, rgba(18,12,8,.58) 48%, transparent 78%);
}

body:not([data-accent]) .panel img[src*="portrait"] {
  width: 124px !important;
  height: 150px !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
  object-position: center 16%;
  filter: saturate(.78) sepia(.08) contrast(1.04) drop-shadow(0 8px 24px rgba(0,0,0,.45));
  -webkit-mask-image: radial-gradient(ellipse at 50% 44%, #000 0 48%, rgba(0,0,0,.82) 60%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 44%, #000 0 48%, rgba(0,0,0,.82) 60%, transparent 76%);
}

@media (max-width: 820px) {
  body[data-accent] main:not(.layout) > .hero { min-height: 600px; }
  body[data-accent] main:not(.layout) > .hero img { object-position: 72% center; }
  body[data-accent] main:not(.layout) > .hero .veil {
    background:
      linear-gradient(90deg, rgba(var(--scene-rgb),.18), transparent 72%),
      linear-gradient(180deg, rgba(var(--scene-rgb),.18) 0%, transparent 30%, rgba(var(--scene-rgb),.36) 55%, rgba(var(--scene-rgb),.90) 78%, rgb(var(--scene-rgb)) 100%);
  }
  body[data-accent] main:not(.layout) > .wrap { margin-top: -138px; }

  body[data-accent="#8fce7f"] main.layout { display: block; overflow: hidden; }
  body[data-accent="#8fce7f"] main.layout .art {
    position: relative;
    width: 100%;
    height: 620px;
    min-height: 0;
    margin: 0 0 -210px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.72) 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.72) 76%, transparent 100%);
  }
  body[data-accent="#8fce7f"] main.layout .art img { position: absolute; object-position: center 30%; }
  body[data-accent="#8fce7f"] main.layout .art > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body[data-accent="#8fce7f"] main.layout .art .veil {
    background: linear-gradient(180deg, rgba(21,35,22,.18), transparent 45%, #152316 100%);
  }
  body[data-accent="#8fce7f"] main.layout .content {
    padding: 110px 24px 58px;
    background: transparent;
  }
  body[data-accent="#8fce7f"] main.layout .content::before {
    inset: 0 -30px;
    background: linear-gradient(180deg, transparent, rgba(21,35,22,.86) 8rem, #152316 19rem);
  }
}

@media (max-width: 500px) {
  body:not([data-accent]) .panel { padding: 34px 28px; }
  body:not([data-accent]) .panel img[src*="portrait"] { width: 102px !important; height: 124px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-accent] main:not(.layout) > .hero img { transform: none; }
}