/*
 * Compagnie SKR – interaction styles and site-wide fixes.
 * Loaded after skr.css. Works with js/main.js.
 */

/* ------------------------------------------------------------------ */
/* Easing                                                              */
/* ------------------------------------------------------------------ */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --page-max: 1920px;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------ */
/* Dark / light theme                                                  */
/* Registered so the colours cross-fade when the toggle is used.        */
/* ------------------------------------------------------------------ */
@property --global-colors--text-default { syntax: "<color>"; inherits: true; initial-value: #0e1011; }
@property --global-colors--text-inverse { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --global-colors--text-muted { syntax: "<color>"; inherits: true; initial-value: #0e101199; }
@property --global-colors--text-muted-inverse { syntax: "<color>"; inherits: true; initial-value: #ffffffb3; }
@property --global-colors--border-default { syntax: "<color>"; inherits: true; initial-value: #e8eded; }
@property --global-colors--border-inverse { syntax: "<color>"; inherits: true; initial-value: #262829; }
@property --global-colors--background-default { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --global-colors--background-muted { syntax: "<color>"; inherits: true; initial-value: #f8f8f8; }
@property --global-colors--background-muted-2 { syntax: "<color>"; inherits: true; initial-value: #eee; }
@property --global-colors--background-primary { syntax: "<color>"; inherits: true; initial-value: #0e1011; }
@property --global-colors--background-primary-muted { syntax: "<color>"; inherits: true; initial-value: #181a1b; }
@property --global-colors--background-primary-muted-2 { syntax: "<color>"; inherits: true; initial-value: #1f2122; }

:root.anim-ready {
  transition-property: --global-colors--text-default, --global-colors--text-inverse,
    --global-colors--text-muted, --global-colors--text-muted-inverse,
    --global-colors--border-default, --global-colors--border-inverse,
    --global-colors--background-default, --global-colors--background-muted,
    --global-colors--background-muted-2, --global-colors--background-primary,
    --global-colors--background-primary-muted, --global-colors--background-primary-muted-2;
  transition-duration: 0.2s;
}

:root[data-theme="dark"] {
  --global-colors--text-default: #fff;
  --global-colors--text-inverse: #0e1011;
  --global-colors--text-muted: rgba(255, 255, 255, 0.7);
  --global-colors--text-muted-inverse: rgba(14, 16, 17, 0.7);
  --global-colors--border-default: #262829;
  --global-colors--border-inverse: #e8eded;
  --global-colors--background-default: #0e1011;
  --global-colors--background-muted: #181a1b;
  --global-colors--background-muted-2: #1f2122;
  --global-colors--background-primary: #fff;
  --global-colors--background-primary-muted: #f8f8f8;
  --global-colors--background-primary-muted-2: #eee;
}

:root[data-theme="dark"] .light-mode { display: none; }
:root[data-theme="dark"] .dark-mode { display: block; }

.toggle-color-dot {
  transition: translate 0.7s var(--ease-in-out-quint);
}
:root[data-theme="dark"] .toggle-color-dot {
  translate: 30px 0;
}
/* A grey ring keeps the switch visible on both light and dark areas
   (in light mode the dark pill vanished over the black footer). */
.toggle-color {
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.6), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.toggle-color:focus-visible {
  outline: 2px solid var(--global-colors--text-default);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Scroll reveals                                                      */
/* ------------------------------------------------------------------ */
/* Room for accents (À, É) that the clipping wrapper used to cut off. */
[data-reveal="move-up"] {
  padding-top: 0.12em;
}
.anim-ready [data-reveal="move-up"] {
  transform: translateY(105%);
}
.anim-ready [data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
}
.anim-ready [data-reveal="move-up"].is-revealed {
  transform: none;
  transition: transform 0.7s var(--ease-out-quart) var(--reveal-delay, 0ms);
}
.anim-ready [data-reveal="fade-up"].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s var(--ease-out-quart) var(--reveal-delay, 0ms),
    transform 1.4s var(--ease-out-quart) var(--reveal-delay, 0ms);
}

.anim-ready .line,
.anim-ready .line-2 {
  width: 0;
}
.anim-ready .line.is-revealed,
.anim-ready .line-2.is-revealed {
  width: 100%;
  transition: width 0.7s var(--ease-in-out-quint);
}

/* Scroll-linked effects are driven from JS; hint the compositor. */
.image-cover-parallax,
.project-gallery-image {
  will-change: transform;
}

/* ------------------------------------------------------------------ */
/* Page loader (home)                                                  */
/* ------------------------------------------------------------------ */
.pageloader-heading {
  will-change: transform;
}

/* ------------------------------------------------------------------ */
/* Header that hides while scrolling down (tablet and phone)            */
/* ------------------------------------------------------------------ */
.header {
  transition: transform 0.7s var(--ease-in-out-quint);
}
.header.is-hidden {
  transform: translateY(-101%);
}

/* ------------------------------------------------------------------ */
/* Mobile menu                                                         */
/* ------------------------------------------------------------------ */
.mobile-menu {
  translate: 0 -100dvh;
  transition: translate 0.7s var(--ease-in-out-quint) 0.3s;
}
.menu-open .mobile-menu {
  translate: 0 0;
  transition: translate 1s var(--ease-in-out-quint);
}
.menu-open body {
  overflow: hidden;
}

.menu-toggle-line {
  transition: translate 0.7s var(--ease-in-out-quint) 0.1s, rotate 0.5s var(--ease-in-out-quint);
}
.menu-open .menu-toggle-line {
  transition: translate 0.7s var(--ease-in-out-quint), rotate 0.5s var(--ease-in-out-quint) 0.2s;
}
.menu-open .menu-toggle-line.top {
  translate: 0 4px;
  rotate: -20deg;
}
.menu-open .menu-toggle-line.bottom {
  translate: 0 -4px;
  rotate: 20deg;
}

/* ------------------------------------------------------------------ */
/* Hover effects (desktop with a mouse)                                */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) and (hover: hover) {
  .navbar-item-line {
    transition: width 0.5s var(--ease-in-out-quart);
  }
  .navbar-menu-item:hover .navbar-item-line {
    width: 100%;
  }

  .nav-item-line {
    transition: width 0.5s var(--ease-out-quart);
  }
  .nav-item:hover .nav-item-line {
    width: 100%;
  }

  .project-preview-image-wrapper .view-button,
  .project-preview-large-image-wrapper .view-button,
  .project-gallery-image-wrapper .view-button {
    scale: 0;
    transition: scale 0.3s var(--ease-in-quint), translate 0.1s linear;
  }
  .project-preview-image-wrapper:hover .view-button,
  .project-preview-large-image-wrapper:hover .view-button,
  .project-gallery-image-wrapper:hover .view-button {
    scale: 1;
    transition: scale 0.3s var(--ease-out-quint), translate 0.1s linear;
  }
}

/* ------------------------------------------------------------------ */
/* Accordion (team bios)                                               */
/* ------------------------------------------------------------------ */
.anim-ready .accordion-content-wrapper {
  height: 0;
  transition: height 0.3s ease;
}
.accordion-icon {
  transition: rotate 0.3s ease;
}
.accordion.is-open .accordion-icon {
  rotate: 45deg;
}
.accordion:focus-visible {
  outline: 2px solid var(--global-colors--text-default);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* Agenda tabs                                                         */
/* ------------------------------------------------------------------ */
.tab-link {
  cursor: pointer;
}
.tab-pane.is-active {
  animation: tab-in 0.3s ease;
}
@keyframes tab-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Lightbox                                                            */
/* ------------------------------------------------------------------ */
.lightbox-link {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 16, 17, 0.94);
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-visible {
  opacity: 1;
}
.lightbox-open body {
  overflow: hidden;
}

.lightbox-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4.5rem 5.5rem;
  box-sizing: border-box;
  cursor: zoom-out;
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  scale: 0.97;
  transition: opacity 0.4s ease, scale 0.5s var(--ease-out-quart);
  cursor: default;
}
.lightbox-image.is-loaded {
  opacity: 1;
  scale: 1;
}

.lightbox-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lightbox-button:hover {
  background: rgba(255, 255, 255, 0.18);
}
.lightbox-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lightbox-button svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lightbox-next { right: 1.25rem; top: 50%; translate: 0 -50%; }
.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next {
  display: none;
}

.lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--global--body-font-family);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  .lightbox-figure {
    padding: 4rem 0.75rem;
  }
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 0.75rem;
    translate: none;
  }
  .lightbox-counter {
    bottom: 1.6rem;
  }
}

/* ------------------------------------------------------------------ */
/* Large and wide screens                                              */
/*                                                                     */
/* From 1440px the original stylesheet switches to fixed rem and px   */
/* sizes, which left small text floating in a very wide page. Here the */
/* root font size grows gently with the window (16px at 1440px, 18px   */
/* at 1920px, 20px from 2400px) and px sizes are restated in rem so    */
/* they follow. Past 2400px the content keeps its width and centres.   */
/* ------------------------------------------------------------------ */
@media (min-width: 1440px) {
  html {
    font-size: clamp(16px, calc(10px + 0.4167vw), 20px);
  }

  :root {
    --global--body-font-size: 1.125rem;
    --text-meta--font-size: 1.25rem;
    --form--font-size: 1rem;
    --label--font-size: 0.75rem;
    --subnav--font-size: 0.75rem;
    --button-text--font-size: 1.125rem; /* was 1.25vw */
    --button--font-size: 1.125rem;
    --nav--font-size: 1.125rem;
    --navbar-item--font-size: 1.125rem;
  }

  .body,
  .button-text,
  .navbar-menu-item { font-size: 1.25rem; }
  .text-meta,
  .text-meta.text-color-muted,
  .text-meta-2,
  .text-meta-2.text-color-muted { font-size: 1.375rem; }
  .text-meta-small { font-size: 1.125rem; }
  .form-input-2 { font-size: 1rem; }

  .navbar-logo-image { width: 4.6875rem; height: auto; }
  .view-button { width: 3.375rem; height: 3.375rem; }
  .view-button-icon { width: 1.875rem; height: 1.875rem; }
  .toggle-color { width: 4.375rem; height: 2.5rem; padding: 0.625rem; bottom: 2rem; left: 2rem; }
  .toggle-color-dot { width: 1.25rem; height: 1.25rem; }
  :root[data-theme="dark"] .toggle-color-dot { translate: 1.875rem 0; }
}

/* ------------------------------------------------------------------ */
/* Display headings on desktop                                         */
/* The template sized its poster headings at up to 19% of the window   */
/* width, which overwhelmed the page on large screens. On desktop they */
/* are about half the size and stop growing at a fixed size. Phone   */
/* and tablet sizes are unchanged.                                     */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .heading-style-xxlarge { font-size: min(10vw, 10rem); }
  .heading-style-xlarge  { font-size: min(8vw, 8rem); }
  .heading-style-large   { font-size: min(7vw, 7rem); }
  .heading-style-medium  { font-size: min(6vw, 6rem); }
  .heading-style-small   { font-size: min(5vw, 5rem); }
  .heading-style-h1      { font-size: min(4.5vw, 4rem); }
  .heading-style-h2      { font-size: min(4vw, 4rem); }
}

/* Past 2400px keep the content at that width and centre it; colour     */
/* bands and photos still run edge to edge.                             */
@media (min-width: 2401px) {
  :root {
    --wide-gutter: calc((100vw - 2400px) / 2);
  }
  .padding-global,
  .navbar,
  .navbar-small,
  .footer,
  .section-top,
  .section-services-hero,
  .studio-hero-top,
  .section-work-projects-top,
  .studio-awards-grid-content,
  .mentions-right-bottom,
  .support {
    padding-left: calc(var(--wide-gutter) + 6rem);
    padding-right: calc(var(--wide-gutter) + 6rem);
  }
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Keep two-word menu items ("À propos") on one line. */
.navbar-menu-item-text {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Home page on desktop: the colour bands become six tiles in three    */
/* columns of two: À propos / Équipe, Créations / Agenda, Contact /    */
/* Soutiens. The HTML follows the same order, so phones show one band  */
/* per line in that order.                                             */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .main-wrapper:has(> .section-home-about) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .main-wrapper > .section-home-hero {
    grid-column: 1 / -1;
  }
  .main-wrapper > :is(.section-home-about, .section-home-team) { grid-column: 1; }
  .main-wrapper > :is(.section-home-creations, .section-home-calendar) { grid-column: 2; }
  .main-wrapper > :is(.section-home-contact, .section-home-support) { grid-column: 3; }
  .main-wrapper > :is(.section-home-about, .section-home-creations, .section-home-contact) { grid-row: 2; }
  .main-wrapper > :is(.section-home-team, .section-home-calendar, .section-home-support) { grid-row: 3; }
  /* the top row fades out on scroll, so it slides under the row below */
  .main-wrapper > :is(.section-home-about, .section-home-creations, .section-home-contact) { z-index: 1; }
  .main-wrapper > :is(.section-home-team, .section-home-calendar, .section-home-support) { z-index: 2; }

  .main-wrapper > :is(.section-home-about, .section-home-team, .section-home-creations,
    .section-home-calendar, .section-home-contact, .section-home-support) > .section-top {
    min-height: 20rem;
    height: 100%;
    justify-content: flex-end;
    padding: 3rem;
  }
  .main-wrapper > :is(.section-home-about, .section-home-team, .section-home-creations,
    .section-home-calendar, .section-home-contact, .section-home-support) .heading-style-xxlarge {
    font-size: min(4.5vw, 5.5rem);
  }

  /* the whole tile is the link, with an arrow in the corner */
  .main-wrapper > section > .section-top > .home-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .main-wrapper > :is(.section-home-about, .section-home-team, .section-home-creations, .section-home-calendar,
    .section-home-contact, .section-home-support) > .section-top > .home-link::after {
    content: "\2197\FE0E";
    position: absolute;
    top: 2.25rem;
    right: 2.75rem;
    font-family: var(--global--body-font-family);
    font-size: 2.25rem;
    line-height: 1;
    transition: translate 0.4s var(--ease-out-quart);
  }
  .main-wrapper > section > .section-top > .home-link:hover::after {
    translate: 0.35rem -0.35rem;
  }
}

/* ------------------------------------------------------------------ */
/* Review fixes                                                        */
/* ------------------------------------------------------------------ */

/* The menu toggle is a real <button> now: drop the browser's button look. */
.mobile-menu-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--global-colors--text-default);
  outline-offset: 4px;
}

/* Contact form spam trap, hidden from people. */
.hidden-field {
  position: absolute;
  left: -10000px;
}

/* Comfortable reading length for running text. */
.rich-text p,
.rich-text li {
  max-width: 65ch;
}

/* Links that open a new tab say so. */
.nav-item[target="_blank"] .nav-item-text::after,
.rich-text a[target="_blank"]::after {
  /* FE0E asks for the plain text arrow, not the iOS emoji */
  content: "\00a0\2197\FE0E";
  font-size: 0.85em;
}

/* On phones the theme switch would sit over the page; it appears in the
   open menu instead. */
@media (max-width: 767px) {
  .toggle-color {
    display: none;
  }
  .menu-open .toggle-color {
    display: flex;
    z-index: 1001;
  }
}

/* Home page menu: sit at the right edge instead of hugging the photo split. */
@media (min-width: 992px) {
  .navbar-small-right {
    justify-content: flex-end;
  }
  .navbar-small-menu {
    column-gap: clamp(1.5rem, 2vw, 2.5rem);
  }
}

/* ------------------------------------------------------------------ */
/* Legal notices page: easier to scan (same text)                      */
/* ------------------------------------------------------------------ */
.section-mentions .mentions-title {
  text-align: left;
}
.section-mentions .heading-style-large.right {
  text-align: left;
}
.section-mentions .rich-text {
  text-align: left;
  hyphens: auto;
  max-width: 44rem;
}
.section-mentions .rich-text p,
.section-mentions .rich-text li {
  text-align: left;
}
/* each topic starts with a thin rule and clear space */
.section-mentions .rich-text h2 {
  margin: 3rem 0 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid currentColor;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  line-height: 1.1;
}
.section-mentions .rich-text h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* "Crédits :", "Hébergement du site :"… read as small labels */
.section-mentions .rich-text p:has(+ ul) {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--text-meta--font-family);
  font-style: italic;
  opacity: 0.8;
}
.section-mentions .rich-text ul {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}
.section-mentions .rich-text li {
  padding: 0.35rem 0;
}
.section-mentions .rich-text > ul > li + li {
  border-top: 1px solid rgba(14, 16, 17, 0.15);
}
.section-mentions .rich-text ul ul {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}
.section-mentions .rich-text ul ul li {
  border: 0;
  padding: 0.15rem 0;
}
.section-mentions .rich-text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  word-break: break-word;
}
.section-mentions .mentions-right-bottom {
  padding-bottom: 6rem;
}
@media (max-width: 991px) {
  .section-mentions .mentions-right {
    padding-top: 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* Agenda: show (variant underneath) | date | venue                    */
/* Tablet and desktop only; phones keep the template's stacked layout.  */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .studio-awards-table-row .project-hero-meta {
    /* dates share one format, so max-content keeps the column aligned */
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1.2fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 0.25rem;
    align-items: baseline;
  }
  .studio-awards-table-row .project-hero-meta-item:nth-child(2) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .studio-awards-table-row .project-hero-meta-item.title {
    font-style: normal;
  }
  .agenda-variant {
    display: block;
    margin-top: 0.3em;
    font-family: var(--text-meta--font-family);
    font-style: italic;
    font-weight: 500;
    font-size: 0.9em;
    line-height: 1.3;
    opacity: 0.8;
  }
}

/* Footer title: only "Compagnie" slides up, inside its own clip box. When
   it shared one box with "SKR", Safari left a 1px trace of the moving
   word along the bottom edge of the title. */
.footer-top > .overflow-hidden {
  overflow: visible;
}