/* carousel.css: Screen 1, the project carousel.
   Order on screen: project info at the top, carousel lower down, badge arrows on the sides. */
.screen-1 {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 104px var(--space-6) var(--space-7);
}
.carousel-info {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  width: min(58vw, 980px); margin: var(--space-4) auto 0; min-height: 96px;
  transition: opacity .6s var(--ease-slow), transform .6s var(--ease-slow);
}
.carousel-info.is-changing { opacity: 0; transform: translateY(6px); }
.carousel-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--space-1); }
.carousel-title { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; }
.carousel-tags { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { font-size: 13px; font-weight: 700; padding: 3px 10px; border: var(--line-thin) solid var(--black); border-radius: 999px; }

.carousel { position: relative; height: min(58vh, 600px); margin-top: auto; perspective: 1600px; perspective-origin: 50% 0%; }
.carousel-card {
  position: absolute; top: 4%; left: 50%; width: min(52vw, 900px); aspect-ratio: 16 / 10; max-height: 100%;
  margin: 0; transform-origin: center center; transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-slow), filter 1.2s var(--ease-slow), opacity 1.2s var(--ease-slow);
  cursor: pointer;
}
.carousel-card .frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--cream);
  box-shadow: 0 18px 30px -18px rgba(0,0,0,.35); }
/* card thickness: a thin cream edge on top, so it reads as a physical card seen from above */
.carousel-card::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  background: #E2DBCC; transform-origin: bottom; transform: rotateX(70deg); }
.carousel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-card .frame::after {           /* soft cream veil on the side cards */
  content: ""; position: absolute; inset: 0; background: var(--cream);
  opacity: var(--veil, 0); transition: opacity 1.2s var(--ease-slow); pointer-events: none;
}
.carousel-card.is-active { cursor: pointer; }

/* Text cover (used when a project has no picture to show) */
.cover-card { width: 100%; height: 100%; background: var(--yellow); color: var(--black);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 6%; }
.cover-card strong { font: 700 clamp(28px, 4.4vw, 72px)/1.02 var(--font-heading); max-width: 14ch; }
.cover-card span { margin-top: var(--space-3); font-size: clamp(13px, 1.2vw, 18px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Buttons: outline only, so they don't take too much attention */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; min-height: 44px;
  font: 700 16px/1 var(--font-heading); text-decoration: none;
  padding: 12px 22px; border-radius: 999px; border: var(--line-bold) solid var(--black);
  background: transparent; color: var(--black); transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--black); color: var(--yellow); }

/* Arrows: the Solved-IT badge with an arrow instead of the check mark */
.carousel-arrow {
  position: absolute; z-index: 20; width: 72px; height: 72px; padding: 0;
  border: 0; background: transparent no-repeat center / contain; cursor: pointer;
  bottom: calc(var(--space-7) + min(29vh, 300px) - 36px);
  transition: transform .25s var(--ease-soft);
}
.carousel-arrow:hover { transform: scale(1.08) rotate(8deg); }
.carousel-arrow.prev { left: var(--space-5); background-image: url(../media/images/brand/arrow-prev.png); }
.carousel-arrow.next { right: var(--space-5); background-image: url(../media/images/brand/arrow-next.png); }
.carousel-cta { position: absolute; right: var(--space-6); bottom: var(--space-4); z-index: 20; }
.carousel-dots { position: absolute; left: 50%; bottom: calc(var(--space-3) + 26px); transform: translateX(-50%); z-index: 20; display: flex; gap: 4px; }
.carousel-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.carousel-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: var(--line-bold) solid var(--black); background: transparent; transition: background .3s; }
.carousel-dots button[aria-current="true"]::before { background: var(--black); }
.scroll-hint { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--black); }

@media (max-width: 760px) {
  .screen-1 { padding: var(--space-5) var(--space-3) var(--space-4) calc(var(--rail) + var(--space-3)); touch-action: none; }
  .carousel-info { width: 100%; flex-direction: column; align-items: flex-start; min-height: 0; margin-top: 0; }
  .carousel { height: auto; flex: 1 1 auto; min-height: 64svh; overflow: hidden; margin: var(--space-3) calc(-1 * var(--space-3)) var(--space-3) 0; perspective: 1100px; perspective-origin: 30% 50%; }
  .carousel-card::before { left: auto; top: 0; bottom: 0; right: -10px; width: 10px; height: auto; transform-origin: left; transform: rotateY(70deg); }
  .carousel-card { top: 50%; left: 50%; width: 100%; aspect-ratio: 5 / 4; }
  .carousel-arrow { width: 48px; height: 48px; left: auto; right: var(--space-2); bottom: auto; }
  .carousel-arrow.prev { bottom: var(--space-3); right: calc(var(--space-3) + 60px); left: auto; background-image: url(../media/images/brand/arrow-up.png); }
  .carousel-arrow.next { bottom: var(--space-3); right: var(--space-3); background-image: url(../media/images/brand/arrow-down.png); }
  .carousel-arrow:hover { transform: none; }
  .carousel-arrow, .carousel-dots, .carousel-cta { display: none; }
  .carousel-cta { left: calc(50% + var(--rail) / 2); right: auto; transform: translateX(-50%); bottom: var(--space-4); }
  .carousel-dots { left: calc(50% + var(--rail) / 2); bottom: calc(var(--space-4) + 58px); }
  .scroll-hint { display: none; }
}


/* Leaving Screen 1: the carousel fades and sinks back softly while the page turns dark (see scroll-transition.js) */
.screen-1 > .carousel, .screen-1 > .carousel-info, .screen-1 > .carousel-dots, .screen-1 > .carousel-cta, .screen-1 > .carousel-arrow, .screen-1 > .scroll-hint {
  opacity: calc(1 - var(--leave, 0) * 1.1);
}
.screen-1 > .carousel { transform: translateY(calc(var(--leave, 0) * 40px)) scale(calc(1 - var(--leave, 0) * .06)); transform-origin: 50% 0; }
.screen-fade { height: 60vh; background: linear-gradient(to bottom, var(--yellow) 0%, #E0A904 22%, #6B5102 62%, var(--black) 100%); }
@media (max-width: 760px) { .screen-fade { height: 55vh; } }
@media (prefers-reduced-motion: reduce) { .carousel-card, .carousel-card .frame::after { transition-duration: .01s; } }

/* Project colours on the start screen (set by carousel.js from bgColor in project.json) */
:root { --s1-bg: var(--cream); }
.screen-1 { background: var(--s1-bg); color: var(--black); transition: background-color 1.2s var(--ease-slow), color 1.2s var(--ease-slow); }
.screen-1 .carousel-card .frame::after { background: var(--s1-bg); transition: opacity 1.2s var(--ease-slow), background-color 1.2s var(--ease-slow); }
.screen-1 .tag, .screen-1 .btn, .screen-1 .carousel-dots button::before { border-color: currentColor; }
.screen-1 .btn, .screen-1 .scroll-hint { color: inherit; }
.screen-1 .carousel-dots button[aria-current="true"]::before { background: currentColor; }
.screen-1 .carousel-arrow { transition: transform .25s var(--ease-soft), filter 1.2s var(--ease-slow); }
.screen-1.is-dark { color: var(--white); }
.screen-1.is-dark .carousel-arrow { filter: invert(1); }
.screen-1.is-dark .btn:hover, .screen-1.is-dark .btn:focus-visible { background: var(--white); color: var(--black); }
/* The menu takes the project colour while you are on the start screen */
.site-header { --hdr-bg: var(--s1-bg); }
.site-header:not(.on-dark):not(.on-yellow) { background: color-mix(in srgb, var(--hdr-bg) 90%, transparent); transition: transform .35s var(--ease-soft), background-color 1.2s var(--ease-slow), color 1.2s var(--ease-slow); }
.site-header.s1-dark:not(.on-dark):not(.on-yellow):not(.past-s1) { color: var(--white); }
.site-header.s1-dark:not(.on-dark):not(.on-yellow):not(.past-s1) a { color: var(--white); }
.site-header.s1-dark:not(.on-dark):not(.on-yellow):not(.past-s1)::after { background: var(--white); }
.site-header.past-s1:not(.on-dark):not(.on-yellow) { --hdr-bg: var(--cream); }
@media (prefers-reduced-motion: reduce) { .screen-1, .site-header { transition: none !important; } }

/* Page dots removed (Nora, 30 Oct) — the carousel uses the arrows, swiping and clicking the cards */
.carousel-dots { display: none !important; }
/* View Case button removed (Nora, 30 Oct) — click the project in front to open its case */
.carousel-cta { display: none !important; }

/* Arrows (desktop): side by side under the title, above the project frame (Nora, 30 Oct) */
/* Same left/right places at the screen edges as before, only moved up above the carousel */
.carousel-nav { margin: var(--space-3) calc(var(--space-5) - var(--space-6)) 0; display: flex; justify-content: space-between; position: relative; z-index: 20; }
.carousel-nav .carousel-arrow { position: static; width: 72px; height: 72px; }
.screen-1 > .carousel-nav { opacity: calc(1 - var(--leave, 0) * 1.1); }
@media (max-width: 760px) { .carousel-nav { display: none; } }

/* No grey "thickness" line on top of the cards (Nora, 30 Oct) */
.carousel-card::before { display: none !important; }
/* No line under the menu on the first screen, desktop (Nora, 30 Oct) */
@media (min-width: 761px) {
  body.home .site-header:not(.past-s1):not(.on-dark):not(.on-yellow)::after { display: none; }
}

/* The card that flies from the carousel into the collage (scroll-transition.js) */
.morph-ghost { position: fixed; z-index: 30; pointer-events: none; opacity: 0; background: #EFEAE0 center / cover no-repeat; border-radius: 2px; will-change: left, top, width, height; }
.screen-1.fade-light { color: var(--black); }
.morph-ghost span { position: absolute; inset: 0; background: center / cover no-repeat; }
.morph-ghost .morph-to { opacity: 0; }
/* The carousel now lives on its own page (work.html) */
@media (min-width: 761px) {
  body.work-page .site-header:not(.past-s1):not(.on-dark):not(.on-yellow)::after { display: none; }
}

/* Arrows archived (Nora, 9 Nov): hidden, code kept. Projects still change by clicking the side cards,
   the keyboard arrow keys and swiping on mobile. */
.carousel-nav, .carousel-arrow { display: none !important; }